The box model · El modelo de caja
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Español
Cada caja tiene capas
- CSS trata cada elemento como una caja.
- El contenido es tu texto o imagen. El relleno (padding) es el espacio interno, alrededor del contenido.
- El borde es una línea que rodea el relleno. El margen es el espacio externo, que empuja a otras cajas hacia afuera.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Español
Relleno y borde
padding: 20px;añade 20 píxeles de espacio interno en los cuatro lados.border: 2px solid black;dibuja una línea — su ancho, estilo y luego color.- El relleno hace que la caja se sienta más espaciosa; un borde la hace destacar.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Español
Errores comunes
- El modelo de caja sigue el orden: contenido, luego relleno, luego borde, luego margen (de adentro hacia afuera).
- El relleno añade espacio dentro del borde.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Español
Ahora tú intentas
- El relleno está dentro; el borde lo rodea.
- Añade relleno a una caja, y luego un borde.
Explore · Explorar
The CSS box model · El modelo de caja CSS
Every box is content + padding + border + margin around it. · Cada caja es contenido + relleno + borde + margen alrededor de él.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Dale a la caja un poco de espacio interior. Añade padding: 20px; a la regla .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Dibuja una línea alrededor de la caja. Añade border: 2px solid navy; a la regla .box — mantén las tres partes en ese orden: ancho, estilo, color.