Introducción
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear unos elementos con otros. En esta unidad echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños más complejos entendiendo cómo funciona y llegando a conocer la terminología relacionada.
¿Qué es el modelo de cajas CSS?
El modelo de cajas CSS define cómo funcionan las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página.
Partes de una caja
Al definir una caja de tipo bloque en CSS tenemos los siguientes elementos:
- El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como
widthyheight. - El relleno de la caja (o padding box): El relleno es el espacio en blanco alrededor del contenido. Es posible controlar su tamaño usando la propiedad
paddingy otras propiedades relacionadas. - El borde de la caja (o border box): El borde de la caja envuelve el contenido y el relleno. Es posible controlar su tamaño y estilo utilizando la propiedad
bordery otras propiedades relacionadas. - El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde, así como el espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad
marginy otras propiedades relacionadas.
El diagrama siguiente muestra estas capas:
En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.
Observemos por ejemplo la caja que viene definida por el siguiente código CSS, que establece los valores para las propiedades width, height, margin, border, y padding:
.caja {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.
El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.
Ejercicio propuesto: Jugando con el modelo de cajas
En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase definida en CSS que establece los valores de las propiedades
Puedes consultar los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.width,height,margin,borderypadding. Utilizando ese código, crea una página web con cinco cajas diferentes, cada una con diferentes estilos. Tienes que cambiar también el color del texto (puedes elegir los colores que más te gusten). Y finalmente añade algunas sombras al texto usando diferentes estilos y colores.
Código CSS:
.caja1 {
border: 5px solid red;
background-color: lightgray;
padding: 10px;
margin: 25px;
width: 250px;
height: 200px;
...
}
.caja2 {
border: 7px solid green;
background-color: gray;
padding: 5px;
margin: 0px;
width: 300px;
height: 200px;
color: white;
...
}
...
Código HTML:
<div class="caja1">Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.</div> <div class="caja2">Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.</div> ...
Y el resultado:
Márgenes, relleno y bordes
En el ejemplo anterior ya has visto cómo usar las propiedades margin, padding y border. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.
Vamos a explorar estas propiedades más detalladamente.
Margen
El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.
Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:
Ejercicio propuesto: Márgenes personalizados
Crea una página web con el ejemplo que tienes a continuación y cambia los valores de los márgenes para ver cómo se desplazan las cajas debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor. Finalmente, añade tres cajas más con cualquier estilo que desees dentro del mismo contenedor.
.contenedor {
border: 5px solid red;
}
.caja1 {
border: 5px solid green;
margin-top: 10px;
margin-left: 10px;
width: 50%;
}
.caja2 {
border: 5px solid blue;
margin-top: 10px;
margin-left: 50px;
width: 50%;
}
.caja3 {
border: 5px solid orange;
margin-top: 10px;
margin-left: 100px;
width: 50%;
}
...
<div class="contenedor"> <div class="caja1">Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor</div> <div class="caja2">Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor</div> <div class="caja3">Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor</div> ... </div>
Relleno
El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.
Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad padding, o para cada lado uno de los lados usando las propiedades equivalentes:
Ejercicio propuesto: Padding personalizado
Si cambias los valores para el relleno de las clases «.caja» del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase «.contenedor», que ampliará el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y aumentará el espacio entre su borde y lo que esté dentro del elemento. Crea una página web con el siguiente código y añade tres cuadros más con diferentes rellenos y estilos.
.caja1 {
border: 5px solid red;
margin: 10px;
...
}
.caja2 {
border: 5px solid blue;
margin: 10px;
padding: 25px;
...
}
.caja3 {
border: 5px solid green;
margin: 10px;
padding: 50px;
...
}
...
<div class="caja1"> Esta es una caja sin relleno </div> <div class="caja2"> Esta es una caja con 25px de relleno </div> <div class="caja3"> Esta es una caja con 50px de relleno </div> ...
Bordes
El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.
Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.
Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.
Para establecer las propiedades de cada lado de forma individual, puedes utilizar:
Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:
Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:
- border-top-width
- border-top-style
- border-top-color
- border-right-width
- border-right-style
- border-right-color
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left-width
- border-left-style
- border-left-color
Ejercicio propuesto: Bordes personalizados
En el siguiente ejemplo hemos utilizado varios métodos abreviados y largos para diseñar los bordes. Crea una nueva página web con ese código y combina las diferentes propiedades para comprobar cómo funcionan. Finalmente, añade tres cajas más y configura los estilos de borde como más te guste.
Puedes echar un vistazo a las páginas de MDN (enlazadas arriba) para obtener información sobre los diferentes estilos de borde que puedes elegir. También puedes echar un vistazo a los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
.caja1 {
border-top: 5px dotted green;
border-right: 5px dashed orange;
border-bottom: 5px dotted red;
border-left: 5px dashed blue;
padding: 15px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
...
}
.caja2 {
border: 5px solid black;
border-left-width: 10px;
border-right-width: 10px;
border-top-color: aqua;
border-bottom-color: pink;
padding: 15px;
text-align: center;
...
}
.caja3 {
border: 2px solid black;
padding: 10px;
...
}
...
<div class="caja1">Esta es una caja con diferentes tipos de bordes</div>
<div class="caja2">Esta es otra caja con diferentes tipos de bordes</div>
<div class="caja1">
<div class="caja2">Esta es una caja con diferentes tipos de bordes dentro de otra caja</div>
</div>
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
Estas son cajas dentro de cajas
</div>
</div>
</div>
</div>
</div>
</div>
...