C18Usar márgenes y relleno de CSS en lugar de imágenes espaciadoras para el control de la maquetación

Aplicabilidad

CSS

Descripción

Quienes diseñan webs usan a veces imágenes espaciadoras (normalmente GIF transparentes de 1 por 1 píxel) para controlar mejor la maquetación, por ejemplo en tablas o para sangrar un párrafo. Sin embargo, las hojas de estilo en cascada (CSS) permiten un control suficiente de la maquetación para sustituir las imágenes espaciadoras. Las propiedades CSS de márgenes y relleno pueden usarse por sí solas o combinadas para controlar la maquetación. Las propiedades de margen («margin-top», «margin-right», «margin-bottom», «margin-left» y la abreviada «margin») pueden usarse en cualquier elemento que se muestre como bloque; añaden espacio en el exterior del elemento. Las propiedades de relleno («padding-top», «padding-right», «padding-bottom», «padding-left» y la abreviada «padding») pueden usarse en cualquier elemento; añaden espacio en el interior del elemento.

Ejemplos

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

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

Recursos

• Propiedades de margen: «margin-top», «margin-right», «margin-bottom», «margin-left» y «margin» en la especificación CSS Box Model Module Level 3
• Propiedades de relleno: «padding-top», «padding-right», «padding-bottom», «padding-left» y «padding» en la especificación CSS Box Model Module Level 3