Si comparamos el modelo de cajas con un Huevo Kinder, el área de contenido sería la sorpresa (en la imagen, el cochecito deportivo), mientras que el relleno sería la cápsula de plástico de color amarillo en la que viene la sorpresa. El chocolate sería el borde y el envoltorio de aluminio sería el margen.
Área de contenido.
Recuerda que el área de contenido es la parte más interna de la caja. En el ejemplo siguiente se muestra cómo se pueden modificar las propiedades que afectan al tamaño del área de contenido: su ancho (width) y su altura (height).
Ejemplo:
div {width:100px; height:200px; }Existen otras propiedades interesantes que nos permiten ajustar la altura y el ancho máximo y mínimo del área de contenido de las cajas. Estas propiedades son, respectivamente: max-height, max-width, min-height y min-width.
Relleno.
El relleno es una cantidad opcional de espacio existente entre el área de contenido de un elemento y su borde. Es conveniente que establezcas un valor de relleno cuando pones borde a un elemento.
Para establecer el relleno se emplea la propiedad padding. Esta propiedad, como muchas otras en CSS, obliga a configurar los valores en un orden determinado. Estos valores y su orden son: top (arriba), right derecha, bottom (debajo) e left (izquierda).
El ejemplo siguiente muestra una tabla que agrupa algunos ejemplos de la asignación de valores y su interpretación por CSS. En todos los ejemplos se ha empleado como selector el elemento div.
| EJEMPLO | INTERPRETACIÓN |
|---|---|
|
Establece un relleno para todos los elementos div de 3 píxeles por encima del área de contenido, 20 píxeles a su derecha, 3 píxeles por debajo y 20 píxeles a su izquierda. |
|
Al omitir un valor, asume que el valor del relleno a la izquierda es el mismo que el de la derecha. |
|
Al omitir dos valores, asume que el primer valor corresponde al relleno por encima y por debajo del área de contenido y, el segundo valor corresponde al relleno a la derecha y a la izquierda. |
|
Al omitir tres valores, asume que ese valor es el mismo para todos. |
Otras características interesantes del relleno son:
- El valor del relleno se sumará al de
widthya definido en el elemento. - Su color es el mismo al del área de contenido.
- El relleno nunca se "colapsa". Esto lo entenderás cuando veas los márgenes que sí se colapsan.
En el siguiente ejemplo se muestra cómo configuramos el relleno y el color de fondo del área de contenido de los elementos h1 del documento. El color del área de relleno será el mismo que el del elemento.
Ejemplo:
h1 {padding: 4px 10px; background: #ccc; }
El producto consiste en un huevo de chocolate, con una capa interna de leche, que contiene una cápsula de plástico con una sorpresa —habitualmente un muñeco o juguete pequeños— en su interior, de forma similar a un huevo de pascua.