Todos los elementos HTML pueden considerarse cuadros.
En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y disposición.
El modelo de cuadro CSS es esencialmente un cuadro que envuelve cada elemento HTML. Consta de: márgenes, bordes, relleno y el contenido real. La siguiente imagen ilustra el modelo de caja:
Explicación de las diferentes partes:
Contenido: el contenido del cuadro, donde aparecen el texto y las imágenes.
Relleno: borra un área alrededor del contenido. El acolchado es transparente.
Borde: un borde que rodea el relleno y el contenido.
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 elementos.
Demostración del modelo de caja:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}Pruébelo usted mismo →
<!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>
Para establecer correctamente el ancho y el alto de un elemento en todos los navegadores, necesita saber cómo funciona el modelo de caja.
Importante: Cuando estableces las propiedades de ancho y alto de un elemento con CSS, simplemente establece el ancho y alto del área de contenido. A Para calcular el tamaño completo de un elemento, también debes agregar relleno, bordes y márgenes.
Este elemento <div> tendrá un ancho total de 350px:
div { width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>
</body>
</html>
Aquí está el cálculo:
320 píxeles (ancho)
+ 20px (relleno izquierdo + derecho)
+ 10px (borde izquierdo + derecho)
+ 0px (margen izquierdo + derecho)
= 350 píxeles
El ancho total de un elemento debe calcularse así:
Ancho total del elemento=ancho + relleno izquierdo + relleno derecho + izquierdo borde + borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así:
Altura total del elemento=altura + relleno superior + relleno inferior + superior borde + borde inferior + margen superior + margen inferior
Nota: La propiedad de margen también afecta el espacio total que ocupa el cuadro. ocupará la página, pero el margen no está incluido en el tamaño real de la caja. El ancho y alto total del cuadro terminan en el borde.