El modelo de caja CSS es un contenedor que contiene varias propiedades, incluidos los bordes, el margen, el relleno y el contenido en sí. Se utiliza para crear el diseño y la maquetación de las páginas web. Se puede utilizar como un conjunto de herramientas para personalizar el diseño de diferentes elementos. El navegador web representa cada elemento como un cuadro rectangular de acuerdo con el modelo de cuadro CSS. Box-Model tiene múltiples propiedades en CSS. Algunos de ellos se dan a continuación:
- contenido : esta propiedad se usa para mostrar el texto, las imágenes, etc., que se pueden dimensionar usando la propiedad de ancho y alto .
- padding : esta propiedad se usa para crear espacio alrededor del elemento, dentro de cualquier borde definido.
- borde : esta propiedad se usa para cubrir el contenido y cualquier relleno, y también permite establecer el estilo, el color y el ancho del borde.
- margin : esta propiedad se usa para crear espacio alrededor del elemento, es decir, alrededor del área del borde.
La siguiente figura ilustra el modelo Box en CSS.
- Área de contenido: esta área consta de contenido como texto, imágenes u otro contenido multimedia. Está delimitado por el borde del contenido y sus dimensiones vienen dadas por el ancho y la altura del cuadro de contenido.
- Padding Area: Incluye el padding del elemento. Esta área es en realidad el espacio alrededor del área de contenido y dentro del cuadro de borde. Sus dimensiones están dadas por el ancho de la caja de relleno y la altura de la caja de relleno.
- Área de Borde: Es el área entre el relleno y el margen de la caja. Sus dimensiones vienen dadas por el ancho y alto del borde.
- Área de margen: esta área consiste en el espacio entre el borde y el margen. Las dimensiones del área Margen son el ancho del cuadro de margen y la altura del cuadro de margen. Es útil para separar el elemento de sus vecinos.
Para configurar la propiedad de ancho y alto de un elemento (para representar correctamente el contenido en el navegador), debemos comprender el funcionamiento del modelo CSS Box .
Al establecer las propiedades de ancho y alto de un elemento con CSS, solo hemos establecido el ancho y el alto del área de contenido. Necesitamos agregar relleno, bordes y márgenes para calcular el tamaño completo de un elemento. Considere el siguiente ejemplo.
p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
El ancho total del elemento se puede calcular como:
Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho
El elemento <p> puede tener un ancho total de 94px.
Ancho total = 80 px (ancho) + 10 px (relleno izquierdo + relleno derecho) + 4 px (borde izquierdo + borde derecho) + 0 px (margen izquierdo + margen derecho) = 94 px.
La altura total del elemento se puede calcular como:
Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior
El elemento <p> puede tener una altura total de 84px.
Altura total = 70 px (altura) + 10 px (relleno superior + relleno inferior) + 4 px (borde superior + borde inferior) + 0 px (margen superior + margen inferior) = 84 px.
Entenderemos el concepto de modelo Box a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra el uso del modelo CSS Box para alinearlo y mostrarlo correctamente.
HTML
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}
.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}
.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo ilustra el modelo de caja mediante la implementación de varias propiedades.
HTML
<!DOCTYPE html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}
#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">GeeksforGeeks</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por vivekkothari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA