Techniques for WCAG 2.0

On this page:

-

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

## 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

On the Microsoft Windows platform, Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 in "quirks mode" and Internet Explorer 7 in "quirks mode" use a box model that deviates from the W3C CSS specification: in these browser versions, right and left padding, and right and left borders do not increase the total width of an element, so the space for the content inside such an element will be narrower. (This behavior is known as the "box model bug".) Internet Explorer 5.5 on Mac OS, and Internet Explorer 6 and 7 on Windows in "standards compliant mode" use the box model defined in the W3C CSS specification.

## 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.

- Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' in the CSS2 specification

- Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' in the CSS2 specification

- A CSS styled table version 2

- IE box model bug

- Internet Explorer and the CSS box model

## Tests

No tests available for this technique.

- Top
- Contents
- Intro
- Previous: Technique C17
- Next: Technique C19