Modelo de caja en CSS | Explicado

CSS, un acrónimo de la hoja de estilo en cascada se utiliza para diseñar elementos HTML y cada contenido que ve en una página web es un elemento en HTML E.G Texto, íconos, botones e imágenes. Cada elemento consume algo de espacio en la página web y ese espacio ocupado por el elemento HTML se conoce como la caja de ese elemento. El modelo de caja se puede representar como el área ocupada por el elemento HTML que consta además de varias propiedades como relleno, margen y bordes.

Este artículo proporcionará una guía paso a paso para comprender el modelo de caja CSS y aprenderemos cada una de las propiedades descritas a continuación en detalle con la ayuda de ejemplos:

• Área de contenido en el modelo de caja
• Modelo de relleno en la caja
• Borders en el modelo de caja
• Modelo de margen en la caja

Entonces, sin demora, procedamos!

Área de contenido en el modelo de caja

El contenido es una de las partes más significativas del modelo de caja que se utiliza para mostrar el texto, las imágenes, etc., y el espacio requerido para mostrar el contenido se conoce como el área de contenido. El área de contenido se puede redimensionar utilizando alto y ancho propiedades.

Está presente en el centro del modelo de caja y se destaca como un área azul en la siguiente figura:

Modelo de relleno en la caja

El relleno no es más que el espacio alrededor del contenido, está presente fuera del contenido y dentro del área fronteriza. Podemos controlar el relleno de cada lado por separado o podemos establecer el relleno de todos los lados al mismo tiempo usando el relleno propiedad. El relleno se destaca como un área verde en la figura que se proporciona a continuación:

Border en el modelo de caja

El borde se muestra alrededor del relleno y dentro del margen. Los bordes se pueden configurar alrededor de cualquier elemento HTML, podemos especificar las propiedades del borde para cada lado i.mi. arriba, izquierda, derecha e inferior usando el Propiedades fronterizas, izquierda-izquierda, derecha fronteriza, de fondo fronterizo respectivamente. Podemos establecer todo el borde al mismo tiempo usando borde propiedad. El borde se destaca como un área amarilla en la figura que se proporciona a continuación:

Modelo de margen en la caja

El espacio fuera de la frontera se llama margen. El margen La propiedad establece el margen en cada lado individualmente o en su conjunto. El margen se destaca como un área naranja en la siguiente figura mencionada:

Ejemplo

Consideremos un ejemplo para comprender todo el concepto del modelo de caja:

Contenido: un elemento HTML presente en el centro de la caja
modelo
Relleno: el relleno no es más que el espacio alrededor del contenido, está presente fuera del contenido y dentro del
zona fronteriza
Borders: el borde se muestra alrededor del relleno y dentro del margen
Margen: el espacio fuera de la ventana del borde se llama margen

El fragmento de anteriores establece el ancho del contenido 500px, altura 100px, borde 5px y relleno 10px, como resultado muestra la siguiente salida:

La regla redox se usa para calcular la altura y el ancho, muestra que el ancho total es igual a 530, y la altura total es igual a 130.

Cómo verificar el ancho y la altura del modelo de caja

Ancho total = margen izquierdo + lente izquierda + hojas izquierdas + ancho del área de contenido + toque derecho + border derecha + margen derecho
Ancho = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Altura total = margen-top + border-top + almohadilla + altura de contenido + retroceso de relleno + botón de borde + bottom de margen
Altura = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Conclusión

El modelo de caja especifica el diseño y el diseño de cualquier página web utilizando múltiples propiedades CSS como borde, altura, ancho, margen y relleno. Este artículo demostró una descripción completa del modelo de caja CSS donde hemos aprendido cómo usar el modelo de caja para personalizar el diseño de cualquier elemento HTML.