Introducción
El modelo de cajas es un concepto fundamental para comprender el funcionamiento de las hojas de estilo. Aquí podrás ver una introducción básica a este modelo. De acuerdo con este modelo, todos los elementos de una página web generan una caja rectangular alrededor llamada “caja del elemento”.
En estas cajas se pueden configurar propiedades como bordes, márgenes y fondos (entre otras). Las cajas también se pueden emplear para posicionar los elementos y diseñar la página.
Las cajas de elementos, tal y como muestra la imagen, están hechas de cuatro componentes principales:
Modelo de cajas CSS
- Contenido (
content), en azul, es la parte interior del elemento, excluyendo el relleno. - Relleno (
padding), en verde, es el espacio que rodea al contenido. - Margen (
margin), en naranja, es el espacio que rodea al borde, la parte más externa del elemento. - Borde (
border), en negro, es el límite que separa el interior del exterior del elemento.
Hay algunas características fundamentales del modelo de cajas que vale la pena destacar:
- El relleno, los bordes y los márgenes son opcionales, por lo que, si ajustas a cero sus valores se eliminarán de la caja.
- Cualquier color o imagen que apliques de fondo al elemento se extenderá por el relleno.
- Los bordes se generan con propiedades de estilo que especifican su estilo (por ejemplo: sólido), grosor y color. Cuando el borde tiene huecos, el color o imagen de fondo aparecerá a través de esos huecos.
- Los márgenes siempre son transparentes (el color del elemento padre se verá a través de ellos).
- Cuando definas el largo de un elemento estás definiendo el largo del área de contenido (los largos de relleno, de borde y de márgenes se sumarían a esta cantidad).
- Puedes cambiar el estilo de los lados superior, derecho, inferior e izquierdo de una caja de un elemento por separado.
Lee Modelo de cajas
Contenido
Podemos definir el tamaño del contenido de la siguiente manera:
1
div {width:100px; height:200px; }
Relleno
Podemos definir el relleno. El orden de los valores son top (arriba), right (derecha), bottom (debajo) e left (izquierda), siempre en el sentido de las agujas del reloj y comenzando en las 12. Es fácil de recordar.
Establece un relleno para todos los elementos div:
1
div {padding: 3px 20px 3px 20px;}
Al omitir un valor, asume que el valor del relleno a la izquierda es el mismo que el de la derecha:
1
div {padding: 3px 20px 3px; }
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:
1
div {padding: 3px 20px; }
Al omitir tres valores, asume que ese valor es el mismo para todos.
1
div {padding: 3px; }
Otras características interesantes del relleno son:
- El valor del relleno se sumará al de width ya 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.
¿El background afecta al padding?
Borde
Los bordes funcionan, a la hora de establecer su valores, de la misma manera que el relleno visto anteriormente, siguiendo un orden: superior, derecho, inferior, izquierdo.
Podemos configurar el estilo del borde, su grosor y su color.
Ejemplo de la propiedad border-style con la que configuramos el estilo del borde:
1
2
div {border-style: solid dashed dotted double; }
div {border-style: solid dashed dotted double; }
La propiedad border-style puede tener los valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset e inherit. En el siguiente ejemplo configuramos cada uno de los lados de la caja con un borde distinto.
Ejemplo de la propiedad border-width con la que configuramos el grosor del borde:
1
2
3
4
div {
border-style: solid;
border-width: thin medium thick 12px;
}
Los valores que puede tomar esta propiedad son: thin, medium, thick, inherit o un valor concreto en píxeles. Si no se especifica esta propiedad tomará medium como valor por defecto. En el siguiente ejemplo configuramos un grosor distinto en cada uno de los lados del borde.
Ejemplo de la propiedad border-color con la que configuramos el color del borde:
1
2
3
4
5
div {
border-style: solid;
border-width: 4px;
border-color: #333 #red rgb(0,0,255) #0044AC;
}
La propiedad border une todas las propiedades “border” vistas hasta ahora. En esta propiedad, a diferencia de las anteriores, no hay que colocar los valores en ningún orden concreto. La propiedad border se emplea cuando se quieren configurar los cuatro lados por igual. Aunque también tenemos las propiedades: border-top, border-right, border-bottom y border-left. Por ejemplo:
1
2
3
h1 {border: .5em solid blue; }
h2 {border-left: solid blue .5em; }
h3 {border-right: solid .5em; }
Margen
Los márgenes top y bottom de dos elementos que van seguidos se “colapsan”. Es decir, se asume como margen entre ambos elementos el mayor de ellos. El siguiente ejemplo muestra lo que que ocurre cuando tenemos dos elementos un h1 y un h2 colocados uno a continuación del otro.
1
2
h1 {margin: 10px 20px 10px 20px; }
h2 {margin: 20px; }
En el primer caso el margen superior e inferior es de 10px. En el segundo caso es de 20px. El espacio resultante entre los dos elementos será de 20px.
Por el contrario, si fuesen dos elementos colocados “uno al lado del otro” (como dos elementos span), deberíamos tener en cuenta que los márgenes right y left no se colapsan, sino que se suman.
¿Qué diferencia hay entre un margin y un padding?