En este artículo, aprenderemos cómo encajan las diferentes partes del cuadro, es decir, el margen, el borde, el relleno y el contenido para crear el cuadro. El modelo de caja especifica cómo se organizan y modelan los elementos HTML en el motor del navegador junto con las propiedades CSS que definen la dimensión de los elementos HTML. El modelo de caja se puede describir como una caja rectangular que se genera para los elementos HTML que forman un árbol de documentos. El modelo de caja tiene 4 propiedades principales: margen, borde, relleno y contenido, que ayudan a crear el diseño y determinar el diseño de las páginas web. Estas propiedades se pueden dar como:
- contenido : esta es una de las partes principales del modelo de caja que contiene texto, imágenes, videos, enlaces, etc., que se pueden cambiar de tamaño usando la propiedad de alto y ancho.
- relleno : es la propiedad utilizada para crear espacio alrededor del contenido dentro de la región bordeada.
- border : Cubre el área debajo del contenido, incluido el relleno alrededor del contenido.
- margen : esta propiedad se refiere a la creación de espacio alrededor del elemento, es decir,
Un modelo de caja simple contiene un contenido, un borde y el espacio externo fuera del borde que requiere la caja. Este espacio exterior viene dado por el margen, que separa la caja de otras cajas. Cuando creamos un contenedor de caja, podemos especificar la distancia entre el borde y el contenido interior, que viene dada por el relleno. El ancho y el color del borde pueden ser proporcionados por el atributo de borde.
Ejemplo: Este ejemplo describe los conceptos básicos del modelo Box en CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Box</title>
<style>
.box {
background-color: rgb(233, 141, 20);
margin-top: 80px;
margin-left: 5rem;
width: 20rem;
color: blueviolet;
text-align: center;
font-size: 50px;
border: 7px solid red;
padding: 6rem;
}
body {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Producción:
Modelo de caja CSS
Considere el siguiente ejemplo de código para establecer la propiedad de ancho y alto de un elemento:
.box {
margin: 100px 20px 50px 370px;
width: 350px;
height: 50px;
font-size: 50px;
border: 10px solid red;
padding: 160px;
}
La altura y el ancho totales de la caja se pueden encontrar después de agregar las siguientes propiedades como:
Ancho del cuadro = ancho + (relleno izquierdo + relleno derecho) + (borde izquierdo + borde derecho) + (margen izquierdo + margen derecho)
Altura del cuadro = altura + (relleno superior + relleno inferior) + (borde superior + borde inferior) + (margen superior + margen inferior)
Por lo tanto, Ancho total = 350+(160+160)+(10+10)+(370+20) = 1080px
y Altura total = 50+(160+160)+(10+10)+(100+50) = 540px
Propiedad de relleno: los rellenos de CSS se utilizan para crear espacio alrededor del elemento, dentro de cualquier borde definido. Podemos configurar diferentes rellenos para lados individuales (superior, derecho, inferior, izquierdo). Es importante agregar propiedades de borde para implementar propiedades de relleno.
Sintaxis:
padding: "padding-top|padding-right|padding-bottom|padding-left";
Consta de 4 componentes:
- padding-top: especifica el ancho de relleno en el cuadro sobre el contenido
- padding-right: especifica el ancho del relleno en el cuadro a la derecha del contenido
- padding-bottom: especifica el ancho del relleno en el cuadro debajo del contenido
- padding-left: especifica el ancho de relleno en el cuadro a la izquierda del contenido
Ejemplo:
padding: 20px 30px 50px 70px;
También podemos escribir
padding: 40px;
Esto establece un relleno predeterminado de 40 px en las cuatro direcciones dentro del cuadro.
Propiedad de frontera: Es una combinación de tres propiedades.
Sintaxis:
border : "width style color | initial | inherit";
Valores de propiedad:
- ancho : Esto especifica el grosor del borde
- estilo : Esto especifica la perspectiva del borde, ya sea sólido, discontinuo, punteado, doble, ranurado, inserto, etc.
- color: Esto especifica el color del borde
El valor predeterminado es inicial.
Ejemplo:
border: 10px solid red;
Propiedad de margen: tiene cuatro propiedades de margen individuales:
Sintaxis:
margin: "top-margin right-margin bottom-margin left-margin";
- margen superior: especifica el ancho del margen en la parte superior del cuadro
- margen derecho: especifica el ancho del margen a la derecha del cuadro
- bottom-margin: especifica el ancho del margen en la parte inferior del cuadro
- margen izquierdo: especifica el ancho del margen a la izquierda del cuadro
Podemos escribir individualmente o en una sola línea.
Ejemplo:
margin: 100px 20px 50px 370px;
si escribimos
margin: 20px;
Establece un margen predeterminado de 20 px en los 4 lados del objeto de referencia
Podemos entender el modelo de caja a partir de los siguientes ejemplos:
Ejemplo 1: Este ejemplo describe las propiedades Padding y Border.
HTML
<!DOCTYPE html>
<head>
<title>Padding</title>
<style>
.main {
font-size: 38px;
font-weight: bold;
Text-align: center;
}
.box {
margin-left: 500px;
border: 50px solid #059900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.box1 {
font-size: 42px;
font-weight: bold;
color: #000000;
margin-top: 60px;
background-color: #d9c5db;
}
</style>
</head>
<body>
<div class="main">CSS Padding and Border</div>
<div class="box">
<div class="box1">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Borde verde y relleno blanco alrededor del área de contenido
Ejemplo 2: El siguiente código ilustra la propiedad Margen del modelo de caja.
HTML
<!DOCTYPE html>
<head>
<title>Padding</title>
<style>
.main {
font-size: 38px;
font-weight: bold;
Text-align: center;
}
.box {
margin-left: 500px;
border: 50px solid #059900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
margin-top: 180px;
}
.box1 {
font-size: 42px;
font-weight: bold;
color: #000000;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="main">CSS Margin Property</div>
<div class="box">
<div class="box1">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Margen aplicado en la parte superior del modelo de caja