El modelo de caja: la propiedad margin, border y padding
Cualquier elemento de una página web está contenido en una "caja" rectangular. Esta caja puede tener:
un borde visible (que se define mediante la propiedad border)
un margen exterior transparente por fuera del borde (que se define mediante la propiedad margin)
un margen interior transparente entre el borde y el elemento (que se define mediante la propiedad padding)
La imagen siguiente muestra un párrafo de texto con borde y márgenes exterior e interior. En la imagen, los límites del borde y de los márgenes se han indicado mediante líneas discontinuas, pero en realidad esos límites no se ven en los navegadores.
Tanto el margen exterior (margin) como el margen interior (padding) son transparentes. Por eso el margen interior se ve del color de fondo del elemento (en el ejemplo, del color de fondo del párrafo), mientras que el margen exterior se ve del color de fondo del elemento padre (en el ejemplo, del color de fondo de la página).
Cambio del modelo de caja: box-sizing
En el modelo de caja CSS "clásico", el borde y el margen interior se añaden al tamaño del elemento definido con las propiedades width y height.
La propiedad box-sizing, introducida en la recomendación CSS Basic User Interface Module Level 3 (CSS3 UI) (aprobada en junio de 2018), permite modificar este comportamiento y hacer que el borde y el margen interior se puedan incluir en el interior del tamaño definido con las propiedades width y height. En este caso, lógicamente, se reducirá el espacio disponbile para el contenido.
Los ejemplos siguientes muestran como la propiedad box-sizing modifica la presentación de dos elementos del mismo tamaño:
en el primer ejemplo el borde se dibuja por fuera del tamaño definido para el elemento
en el segundo, el borde se dibuja por dentro del tamaño definido para el elemento
en el tercero, se observa como el comportamiento predeterminado de los navegadores es el correspondiente a content-box
p {
width: 200px;
height: 100px;
box-sizing: content-box;
border: red 25px solid;
}
p {
width: 200px;
height: 100px;
box-sizing: border-box;
border: red 25px solid;
}
p {
width: 200px;
height: 100px;
border: red 25px solid;
}
Tipo de caja: la propiedad display
La propiedad display permite especificar el tipo de caja que se aplica en un elemento. Los diferentes tipos de cajas corresponden a diferentes tipos de contenido (texto, listas, tablas)
Los posibles valores de display son los siguientes:
none: hace que no se genere caja
block: caja rectangular que forma un bloque
inline: caja en-línea que puede ocupar varias líneas y está incluida en una caja de tipo block
inline-block: caja en-línea, pero que se formatea como una caja de tipo block
run-in: caja de tipo inline, pero que se añade al principio del elemento siguiente
list-item: caja de tipo block pero que también incluye un marcador
