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

ID: C18

Technology: css

Type: Technique

## When to Use

CSS

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

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.

#### The CSS

    table { margin: .5em; border-collapse: collapse; }
    td, th { padding: .4em; border: 1px solid #000; }

#### The HTML

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

- Margin properties: '`margin-top`', '`margin-right`', '`margin-bottom`', '`margin-left`', and '`margin`' in the CSS Box Model Module Level 3 specification
- Padding properties: '`padding-top`', '`padding-right`', '`padding-bottom`', '`padding-left`', and '`padding`' in the CSS Box Model Module Level 3 specification