11. Modelo de caja y relleno, borde y margen.
Página 57 | Escuchar en audio
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.
Ahora responde el ejercicio sobre el contenido:
En el contexto de CSS, ¿qué es el modelo Box?
¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.
¡Tú error! Inténtalo de nuevo.
Siguiente página del libro electrónico gratuito:
58Colores y fondos en CSS
3 minutos
¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!
