Capítulo 11: Modelo de caja y relleno, borde y margen

El modelo de caja es una de las partes más fundamentales de CSS, ya que controla el diseño y la disposición de muchos aspectos de una página web. Cada elemento de una página web se considera un "cuadro" y ese cuadro puede tener diferentes propiedades, como ancho, alto, relleno, bordes y márgenes.

Modelo Caja

El modelo de caja es una representación de cómo se representa cada elemento en la página. El 'cuadro' de un elemento incluye el contenido, el relleno, el borde y el margen del elemento. El contenido es el texto, la imagen o cualquier otra cosa dentro del elemento. El relleno es el espacio entre el contenido y el borde. El borde es una línea que rodea el contenido y el relleno. El margen es el espacio entre el borde y los elementos vecinos.

Para ver el modelo de caja, puede utilizar la herramienta de inspección del navegador. Esto mostrará el ancho y alto del contenido, el relleno, el borde y el margen de un elemento.

Relleno

El relleno es el espacio entre el contenido de un elemento y su borde. Puede configurar el relleno para todos los lados a la vez usando la propiedad 'padding', o puede configurar cada lado individualmente usando 'padding-top', 'padding-right', 'padding-bottom' y 'padding-left'. /p>

Por ejemplo, si quisiera agregar un relleno de 10 píxeles en la parte superior de un elemento, usaría 'padding-top: 10px;'. Si quisiera agregar un relleno de 10px a todos los lados, usaría 'padding: 10px;'. El relleno es transparente, por lo que el fondo del elemento será visible a través de él.

Frontera

Un borde es una línea que rodea el relleno y el contenido de un elemento. Puede establecer el ancho, el estilo y el color del borde utilizando las propiedades 'ancho de borde', 'estilo de borde' y 'color de borde' respectivamente. También puede configurar las tres propiedades a la vez usando la propiedad 'borde'.

Por ejemplo, si quisieras un borde sólido de 1px de ancho alrededor de un elemento, usarías 'border: 1px solid;'. Si quisieras que este borde fuera rojo, usarías 'border: 1px solid red;'. También puede configurar las propiedades del borde para cada lado individualmente usando 'border-top', 'border-right', 'border-bottom' y 'border-left'.

Margen

El margen es el espacio entre el borde de un elemento y los elementos que lo rodean. Puede establecer el margen para todos los lados a la vez usando la propiedad 'margen', o puede configurar cada lado individualmente usando 'margen superior', 'margen derecho', 'margen inferior' y 'margen izquierdo'. < /p>

Por ejemplo, si quisieras agregar un margen de 10px en la parte superior de un elemento, usarías 'margin-top: 10px;'. Si quisiera agregar un margen de 10px a todos los lados, usaría 'margen: 10px;'. El margen es transparente, por lo que todo lo que esté detrás del elemento será visible a través de él.

Comprender el modelo de caja es fundamental para poder crear diseños complejos y responsivos. Es una de las primeras cosas que debes aprender al comenzar con CSS y será una herramienta valiosa en tu arsenal como desarrollador front-end.