En CSS, el término modelo de caja se usa cuando se habla de diseño y maquetación. El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes, relleno y el contenido real. La siguiente imagen ilustra el modelo de caja:
Explicación de las diferentes partes
- Content (contenido): El contenido de la caja, donde aparecen texto e imágenes.
- Padding (relleno): Borra un área alrededor del contenido. El relleno es transparente.
- Border (borde): Un borde que rodea el relleno y el contenido.
- Margin (margen): Borra un área fuera del borde. El margen es transparente.
El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element.
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding,
20px margin and a 15px green border. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Alto y ancho de un elemento
Para establecer correctamente el ancho y el alto de un elemento en todos los navegadores, debes saber cómo funciona el modelo de caja.
Importante: cuando estableces las propiedades de ancho y alto de un elemento con CSS, simplemente estableces el ancho y el alto del área de contenido. Para calcular el tamaño completo de un elemento, también debes agregar relleno, bordes y márgenes.
Ejm
El siguiente <div> tiene un ancho total de 350px
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
El cálculo es el siguiente:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
El ancho total de un elemento debe calcularse así: Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho.
La altura total de un elemento debe calcularse así: Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior.