Una pizza dentro de su caja
Cuando pides una pizza, llega dentro de una caja de cartón.
Entre la pizza y el cartón hay un hueco. Y la caja de al lado no toca a la tuya.
En una página web pasa igual. Cada elemento es una caja con huecos, y hoy aprendes a medirlos.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Contenido | Lo que hay dentro de la caja: el texto o la imagen. | width: 200px; |
| Relleno | El hueco entre el contenido y el borde. En inglés, padding. | padding: 20px; |
| Borde | La línea que rodea la caja. | border: 5px solid navy; |
| Margen | El hueco fuera del borde, entre una caja y otra. En inglés, margin. | margin: 10px; |
| Píxel | Un punto de la pantalla. Se escribe px. | 20px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Pruébalo: una caja con sus capas
<div class="box">Soy el contenido.</div>
<div class="box">Soy otra caja.</div>
Cómo se escribe cada capa
Un solo número vale para los cuatro lados: padding: 20px;.
También puedes dar un lado concreto: margin-top, margin-right, margin-bottom y margin-left.
El borde lleva tres datos: grosor, tipo de línea y color. Por ejemplo, border: 2px solid black;.
Ejemplo resuelto: ¿cuánto mide la caja?
| Caja | Contenido | Relleno (cada lado) | Borde (cada lado) | Ancho de la caja | Margen (cada lado) | Sitio que ocupa |
|---|---|---|---|---|---|---|
| A | 100 px | 10 px | 2 px | 124 px | 5 px | 134 px |
| B | 200 px | 20 px | 5 px | 250 px | 10 px | 270 px |
| C | 150 px | 0 px | 1 px | 152 px | 20 px | 192 px |
| D | 300 px | 15 px | 3 px | 336 px | 0 px | 336 px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La suma de la caja B
Consejo
Contenido 200, más relleno 20 a cada lado (40), más borde 5 a cada lado (10): 250.
Con el margen, 10 a cada lado (20), ocupa 270 píxeles.
Repaso rápido: sumas de cajas
Inténtalo
Repaso rápido: sumas de cajas
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Una caja que no se hincha
Por defecto, width mide solo el contenido. Si añades relleno y borde, la caja crece.
Con box-sizing: border-box; el ancho incluye el relleno y el borde. La caja mide lo que dices.
Muchos diseñadores lo ponen en todas las cajas desde el principio.