Comprensión Práctica del Modelo de Caja
Desliza para mostrar el menú
Cada elemento en una página web se representa como una caja rectangular. Cada caja consta de cuatro partes:
- Contenido: el texto real o los elementos;
- Relleno: espacio dentro del elemento;
- Borde: rodea el contenido y el relleno;
- Margen: espacio fuera del elemento.
Estructura visual
Margen → Borde → Relleno → Contenido. El tamaño total de un elemento depende de todas estas partes.
Contenido
La parte visible del elemento: texto, imágenes u otros elementos.
Relleno (Espacio interno)
Crea espacio entre el contenido y el borde.
.box {
padding: 20px;
}
Forma abreviada
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
Margen (Espacio externo)
Crea espacio entre los elementos.
.box {
margin: 20px;
}
Notación abreviada
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;
Borde
Define el borde del elemento.
.box {
border: 4px solid darkblue;
}
Diferencia clave
- Relleno → espacio interno (afecta el fondo);
- Margen → espacio externo (NO afecta el fondo).
Box Sizing
Controla cómo se calculan el ancho y la altura.
box-sizing: content-box; /* default */
box-sizing: border-box;
content-box: padding + border se suman al tamaño;border-box: todo incluido en el tamaño.
En proyectos reales, se prefiere border-box.
El modelo de caja determina el tamaño del elemento, el espaciado y el comportamiento del diseño. Si el diseño se ve descompuesto, generalmente el motivo es el modelo de caja.
¡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
Comprensión Práctica del Modelo de Caja
Cada elemento en una página web se representa como una caja rectangular. Cada caja consta de cuatro partes:
- Contenido: el texto real o los elementos;
- Relleno: espacio dentro del elemento;
- Borde: rodea el contenido y el relleno;
- Margen: espacio fuera del elemento.
Estructura visual
Margen → Borde → Relleno → Contenido. El tamaño total de un elemento depende de todas estas partes.
Contenido
La parte visible del elemento: texto, imágenes u otros elementos.
Relleno (Espacio interno)
Crea espacio entre el contenido y el borde.
.box {
padding: 20px;
}
Forma abreviada
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
Margen (Espacio externo)
Crea espacio entre los elementos.
.box {
margin: 20px;
}
Notación abreviada
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;
Borde
Define el borde del elemento.
.box {
border: 4px solid darkblue;
}
Diferencia clave
- Relleno → espacio interno (afecta el fondo);
- Margen → espacio externo (NO afecta el fondo).
Box Sizing
Controla cómo se calculan el ancho y la altura.
box-sizing: content-box; /* default */
box-sizing: border-box;
content-box: padding + border se suman al tamaño;border-box: todo incluido en el tamaño.
En proyectos reales, se prefiere border-box.
El modelo de caja determina el tamaño del elemento, el espaciado y el comportamiento del diseño. Si el diseño se ve descompuesto, generalmente el motivo es el modelo de caja.
¡Gracias por tus comentarios!
