Box model

Lección 01 de 37 · 3 min

Para CSS, todo elemento es una caja. Antes de color, tipografía o layout, conviene entender de qué está hecha esa caja y cuánto lugar ocupa.

Cuatro capas

Cada caja tiene cuatro capas, de adentro hacia afuera. Cada una tiene su nombre en CSS:

ContenidocontentEl texto, la imagen o los hijos. Lo que miden width y height.
RellenopaddingAire entre el contenido y el borde. Toma el fondo de la caja.
BordeborderLa línea que la rodea. Puede medir 0 y no verse.
MargenmarginEspacio afuera del borde, que separa la caja de las demás. Siempre es transparente.

Mové los controles y mirá cómo cambia la caja: el contenido es el bloque de arriba, el relleno el piso que lo rodea (su ancho, en naranja), el borde el aro y el margen el contorno punteado en el suelo. Está punteado porque ocupa lugar pero no se pinta.

.caja120 + 2×24 + 2×8 = 184px

box-sizing

content-boxborder-box

padding

border

margin

caja.css

.caja {
  box-sizing: content-box;
  width: 120px;
  padding: 24px;
  border: 8px solid;
  margin: 24px;
}

caja.html

<div class="box-content w-30 p-6 border-8 m-6">…</div>

Qué mide width

Por defecto box-sizing vale content-box: width mide solo el contenido, y el relleno y el borde se suman por fuera. Una caja de width: 120px con padding: 24px y un borde de 8px termina midiendo 184px.

content-boxpor defecto

width: 120px
contenido: 120px
ocupa: 184px

border-boxcon el reset

width: 120px
contenido: 56px
ocupa: 120px

Con border-box, width mide hasta el borde inclusive. El relleno y el borde se descuentan del contenido, y la caja mide lo que dice. Por eso casi todos los proyectos arrancan con este reset:

reset.css

1*,
2*::before,
3*::after {
4  box-sizing: border-box;
5}

El margen queda afuera en los dos casos: separa la caja de las demás, pero nunca cuenta en su ancho.

Atajos

padding y margin aceptan de uno a cuatro valores. Se leen como un reloj: arriba, derecha, abajo, izquierda.

padding: 8px 16px 24px 4pxarranca arriba, gira como un reloj

arriba8pxderecha16pxabajo24pxizquierda4px

styles.css

1.caja {
2  padding: 16px;              /* los cuatro lados */
3  padding: 8px 16px;          /* vertical | horizontal */
4  padding: 8px 16px 24px;     /* arriba | horizontal | abajo */
5  padding: 8px 16px 24px 4px; /* arriba | derecha | abajo | izquierda */
6}

Si la página puede estar en otro idioma, mejor usar las propiedades lógicas: padding-inline y padding-block siguen la dirección del texto en vez de izquierda y derecha.

En Tailwind

En Tailwind cada propiedad de la caja tiene su clase. La escala de espaciado avanza de a 4px (--spacing vale 0.25rem), así que p-6 son 24px y w-30 son 120px. Si el valor no cae en la escala, va entre corchetes: p-[7px].

CSS	Tailwind
box-sizing: border-box	box-border
box-sizing: content-box	box-content
width: 120px	w-30 · w-[120px]
padding: 24px · margin: 24px	p-6 · m-6
border: 8px solid	border-8
border-width: 1px	border
padding-top, -right, -bottom, -left	pt-* pr-* pb-* pl-*
padding-inline · padding-block	px-* · py-*
padding-inline-start	ps-*

caja.html

1<!-- 8px 16px 24px 4px, lado por lado -->
2<div class="pt-2 pr-4 pb-6 pl-1">…</div>
3
4<!-- vertical | horizontal, con propiedades lógicas -->
5<div class="px-4 py-2 border-2 m-4">…</div>
6
7<!-- volver al modelo clásico en un solo elemento -->
8<div class="box-content w-30 p-6 border-8">…</div>

Box model

Lesson 01 of 37 · 3 min

To CSS, every element is a box. Before color, type or layout, it pays to understand what that box is made of and how much room it takes.

Four layers

Every box has four layers, from the inside out:

ContentcontentThe text, the image or the children. What width and height measure.
PaddingpaddingRoom between the content and the border. It takes the box's background.
BorderborderThe line around the box. It can be 0 wide and invisible.
MarginmarginSpace outside the border that keeps the box apart from the others. It's always transparent.

Move the controls and watch the box change: the content is the block on top, the padding the floor around it (its width in orange), the border the rim and the margin the dashed outline on the ground. It's dashed because it takes up room but isn't painted.

.box120 + 2×24 + 2×8 = 184px

box-sizing

content-boxborder-box

padding

border

margin

box.css

.box {
  box-sizing: content-box;
  width: 120px;
  padding: 24px;
  border: 8px solid;
  margin: 24px;
}

box.html

<div class="box-content w-30 p-6 border-8 m-6">…</div>

What width measures

By default box-sizing is content-box: width measures only the content, and the padding and border are added on the outside. A box with width: 120px, padding: 24px and an 8px border ends up 184px wide.

content-boxdefault

width: 120px
content: 120px
takes: 184px

border-boxwith the reset

width: 120px
content: 56px
takes: 120px

With border-box, width measures up to and including the border. The padding and border come out of the content, so the box is as wide as it says. That's why almost every project starts with this reset:

reset.css

1*,
2*::before,
3*::after {
4  box-sizing: border-box;
5}

The margin stays outside either way: it keeps the box apart from the others, but never counts toward its width.

Shorthands

padding and margin take one to four values. They go around like a clock: top, right, bottom, left.

padding: 8px 16px 24px 4pxstarts at the top, goes clockwise

top8pxright16pxbottom24pxleft4px

styles.css

1.box {
2  padding: 16px;              /* all four sides */
3  padding: 8px 16px;          /* vertical | horizontal */
4  padding: 8px 16px 24px;     /* top | horizontal | bottom */
5  padding: 8px 16px 24px 4px; /* top | right | bottom | left */
6}

If the page may be in another language, prefer the logical properties: padding-inline and padding-block follow the text direction instead of left and right.

In Tailwind

In Tailwind each box property has its own class. The spacing scale moves in 4px steps (--spacing is 0.25rem), so p-6 is 24px and w-30 is 120px. When a value is off the scale, it goes in brackets: p-[7px].

CSS	Tailwind
box-sizing: border-box	box-border
box-sizing: content-box	box-content
width: 120px	w-30 · w-[120px]
padding: 24px · margin: 24px	p-6 · m-6
border: 8px solid	border-8
border-width: 1px	border
padding-top, -right, -bottom, -left	pt-* pr-* pb-* pl-*
padding-inline · padding-block	px-* · py-*
padding-inline-start	ps-*

box.html

1<!-- 8px 16px 24px 4px, side by side -->
2<div class="pt-2 pr-4 pb-6 pl-1">…</div>
3
4<!-- vertical | horizontal, with logical properties -->
5<div class="px-4 py-2 border-2 m-4">…</div>
6
7<!-- back to the classic model on a single element -->
8<div class="box-content w-30 p-6 border-8">…</div>