Menú principal

Diseñando la apariencial visual.

Cajas básicas (Boxes)

Las hojas de estilo (CSS) asumen que cada elemento genera una o más cajas rectangulares, llamadas caja de elementos (element boxes). Cada caja de elemento se compone de un área de contenido y su núcleo. El área de contenido se rodea por un número opcinal de relleno (padding), bordes (borders), y márgenes (margins). Estos elementos se consideran opcionales ya que su valor puede ser "0".

Cada uno de los márgenes, bordes y rellenos puden establecerse utilizando varias propiedades, tales como: margin-left o border-bottom. El contenido del fondo, ya sea un color o una imagen, también se aplica al relleno. Los márgenes siempre son transparentes, permitiendo que el fondo sea visible. El relleno no puede tener un valor negativo, los márgenes sí.

Los bordes se generan usando estilos definidos, como solid o inset, y el color se establece con la propiedad border-color. En el caso de no establecer ningún color, el borde resalta el color del contenido del elemento. Por ejemplo, si el texto de un párrafo es blanco, entonces cualquier borde alrededor del párrafo será blanco, a menos que definamos uno distinto. El borde tiene siempre el mismo fondo que el contenido y el relleno. La anchura del borde (width) no puede ser negativa.

<body>
    <div>
     <p>Esto es un párrafo</p>
    </div>
</body>

El aspecto de <p> depende del aspecto de <div>, y éste a su vez de <body>

Para comprender mejor el modelo básico de las cajas en CSS visitemos:

http://www.redmelon.net/tstme/box_model/