Spacing — margin and padding · Espaciado — margen y relleno
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Español
Espacio entre cajas
- El margen es el espacio fuera de una caja —la separación con sus vecinos—.
margin: 30px;añade 30 píxeles en los cuatro lados, fuera del borde.- El relleno empuja el contenido hacia adentro; el margen aleja otras cajas.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Español
Un lado a la vez
- Puedes espaciar solo un lado:
margin-top,margin-right,margin-bottom,margin-left. - Lo mismo ocurre con el relleno:
padding-left: 10px;, y así sucesivamente. margin-bottomdebajo de un encabezado lo separa ordenadamente del texto.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Español
Errores comunes
- El relleno está dentro del borde; el margen es el espacio exterior.
box-sizing: border-boxhace que el ancho incluya el relleno y el borde.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Español
Ahora te toca a ti
- El margen es la separación entre cajas; el relleno es el espacio dentro de una.
- Añade margen alrededor de una caja, luego espacio debajo de un encabezado.
Explore · Explorar
margin vs padding · margen vs relleno
Padding is space inside the border; margin · margen is space outside. · Relleno es el espacio dentro del borde; margen es el espacio fuera.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Separa las cajas entre sí. Añade margin: 30px; a la regla .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Añade espacio solo debajo del encabezado. Añade h1 { margin-bottom: 24px; }.