Comprensión Práctica del Modelo de Caja
Desliza para mostrar el menú
Los elementos HTML se representan como cajas rectangulares en una página web. Cada elemento tiene su área de contenido, relleno (padding), borde y margen.
Las cuatro partes del modelo de caja
Contenido
El área de contenido contiene texto, imágenes u otros elementos. Esta es la parte interna visible del elemento.
Relleno
El relleno es el espacio entre el contenido y el borde. Crea un espacio interno.
.box {
padding: 20px;
}
El relleno aumenta el tamaño visible del elemento.
Borde
El borde rodea el relleno y el contenido.
.box {
border: 4px solid darkblue;
}
Por defecto, el ancho del borde es 0 y el color del borde coincide con el color del texto si no se especifica.
Margen
El margen es el espacio fuera del borde. Crea distancia entre los elementos.
.box {
margin: 40px;
}
El margen no afecta el color de fondo del elemento.
index.html
styles.css
En este ejemplo:
- El fondo llena el área de contenido y de relleno;
- El borde los rodea;
- El margen crea espacio fuera de la caja.
Por defecto, algunos elementos tienen propiedades predeterminadas de padding y margin. Esto se hizo para garantizar que una página web sea legible incluso sin ningún estilo.
El modelo de caja determina cuánto espacio ocupa un elemento en una página.
El tamaño total de un elemento depende del tamaño del contenido, el relleno (padding), el borde y el margen.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
