On this page:

C18: Using CSS margin and padding rules instead of spacer images for layout design

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

Applicability

All technologies that support CSS

This technique relates to:

Success Criterion 1.1.1 (Non-text Content)
- How to Meet 1.1.1 (Non-text Content)
- Understanding Success Criterion 1.1.1 (Non-text Content)

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C18.

Description

Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.

Examples

Example 1

The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.

Example Code:


              
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

No tests available for this technique.

This Web page is part of Techniques and Failures for Web Content Accessibility Guidelines 2.0 (see the latest version of this document). The entire document is also available as a single HTML file. See the The WCAG 2.0 Documents for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the Instructions for Commenting on WCAG 2.0 Documents.