Apuntes sobre Html2

Cuando uno enseña, dos aprenden.

El modelo de caja

Todo es una caja

El navegador representa cada elemento HTML como una caja rectangular. Cada caja puede contener otras cajas, que a su vez pueden contener más cajas. Toda la estructura visual de una página es, en el fondo, una jerarquía de rectángulos.

Entender el modelo de caja es la clave para entender por qué un elemento ocupa el espacio que ocupa y por qué a veces las cosas no quedan donde esperamos. El inspector de herramientas del navegador (F12, pestaña "Computed" o "Layout") visualiza el modelo de caja de cualquier elemento con colores: azul para el contenido, verde para el padding, naranja para el margen.

Las cuatro partes: contenido, padding, border, margin

+-------------------------------+
|           Margin              |
|   +-----------------------+   |
|   |        Border         |   |
|   |   +---------------+   |   |
|   |   |    Padding    |   |   |
|   |   |   +-------+   |   |   |
|   |   |   |Contenido  |   |   |
|   |   |   +-------+   |   |   |
|   |   +---------------+   |   |
|   +-----------------------+   |
+-------------------------------+
  • Contenido: el área donde se renderiza el texto, la imagen o los elementos hijos. Su tamaño se controla con width y height.
  • Padding: el espacio entre el contenido y el borde. Forma parte del área clicable del elemento y tiene el color de fondo del elemento.
  • Border: la línea que rodea el padding. Puede tener grosor, estilo y color propios.
  • Margin: el espacio entre el borde del elemento y los elementos adyacentes. Es transparente: no hereda el color de fondo.
.caja {
    width: 300px;
    padding: 16px;
    border: 2px solid #333;
    margin: 24px;
}

box-sizing

Aquí está la parte que confunde a todo el mundo al principio. Por defecto (box-sizing: content-box), el width que declaras en CSS es solo el ancho del contenido. El padding y el border se suman por encima:

/* Con content-box (defecto): */
/* ancho real = 300 + 16 + 16 + 2 + 2 = 336px */
.caja {
    box-sizing: content-box;
    width: 300px;
    padding: 16px;
    border: 2px solid;
}

Con box-sizing: border-box, el width ya incluye padding y border. El contenido se reduce para que el total siga siendo el ancho declarado:

/* Con border-box: */
/* ancho real = 300px exactos (el contenido mide 264px) */
.caja {
    box-sizing: border-box;
    width: 300px;
    padding: 16px;
    border: 2px solid;
}

border-box es mucho más intuitivo para maquetar. La convención moderna es aplicarlo globalmente a todos los elementos al inicio de cualquier hoja de estilos:

*, *::before, *::after {
    box-sizing: border-box;
}

Con esta regla, cuando dices que algo mide 300px, mide 300px, independientemente del padding y el borde que tenga.

Margin y padding: sintaxis abreviada

Ambas propiedades aceptan entre uno y cuatro valores. El orden sigue las agujas del reloj empezando por arriba:

/* Un valor: todos los lados */
margin: 16px;

/* Dos valores: vertical | horizontal */
margin: 16px 24px;

/* Tres valores: arriba | horizontal | abajo */
margin: 8px 16px 24px;

/* Cuatro valores: arriba | derecha | abajo | izquierda */
margin: 8px 16px 24px 0;

Cada lado también tiene su propiedad individual: margin-top, margin-right, margin-bottom, margin-left. Lo mismo con padding.

margin: 0 auto es el truco clásico para centrar horizontalmente un elemento de bloque con ancho definido. El auto hace que el navegador distribuya el espacio sobrante a partes iguales entre los márgenes izquierdo y derecho.

La propiedad border

La forma abreviada combina grosor, estilo y color:

border: 2px solid #333;
border: 1px dashed rgba(0, 0, 0, 0.2);
border: 3px double #84ba3f;

Estilos disponibles: solid, dashed, dotted, double, groove, ridge, inset, outset, none.

Cada lado se puede controlar por separado:

/* Solo borde inferior (separador de sección típico) */
h2 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
}

/* Borde de un lado con otro color */
.tarjeta {
    border: 1px solid #e0e0e0;
    border-left: 4px solid #84ba3f;
}

border-radius

border-radius redondea las esquinas de la caja. Un valor único redondea las cuatro esquinas por igual:

.boton {
    border-radius: 6px;      /* esquinas ligeramente redondeadas */
}

.pastilla {
    border-radius: 9999px;   /* píldora: completamente ovalado */
}

.circulo {
    width: 80px;
    height: 80px;
    border-radius: 50%;      /* círculo perfecto */
}

También admite cuatro valores para controlar cada esquina (top-left, top-right, bottom-right, bottom-left):

.pestana {
    border-radius: 8px 8px 0 0;  /* solo esquinas superiores */
}

Colapso de márgenes

Cuando dos márgenes verticales se encuentran (el margin-bottom de un elemento y el margin-top del siguiente), no se suman: se fusionan y queda el mayor de los dos. Este comportamiento se llama colapso de márgenes.

/* El espacio entre párrafos es 1.5em, no 2.5em */
p { margin-bottom: 1em; }
p + p { margin-top: 1.5em; }

El colapso solo ocurre en el eje vertical y solo entre márgenes directamente adyacentes. No ocurre con elementos flotantes, elementos flex o elementos grid, ni cuando hay padding o borde de por medio.

overflow

Cuando el contenido de un elemento es mayor que su caja, overflow decide qué ocurre:

/* visible (defecto): el contenido se desborda, visible fuera de la caja */
div { overflow: visible; }

/* hidden: el contenido desbordado se recorta */
div { overflow: hidden; }

/* scroll: barra de desplazamiento siempre visible */
div { overflow: scroll; }

/* auto: barra de desplazamiento solo si hay desbordamiento */
div { overflow: auto; }

overflow: hidden tiene un efecto secundario útil: crea un nuevo contexto de formato de bloque, lo que evita el colapso de márgenes y contiene los elementos flotantes dentro del contenedor.

overflow-x y overflow-y controlan cada eje por separado. Patrón habitual para tablas anchas en móvil:

.tabla-wrapper {
    overflow-x: auto;
}

outline vs border

outline dibuja un contorno fuera del borde del elemento, pero sin ocupar espacio en el modelo de caja: no desplaza ni empuja otros elementos.

/* Foco de teclado */
:focus {
    outline: 2px solid #84ba3f;
    outline-offset: 3px;   /* separa el outline del borde */
}

outline no acepta esquinas redondeadas (en la mayoría de navegadores) y no tiene propiedades individuales por lado. Su uso principal es el indicador de foco de accesibilidad: nunca lo elimines sin proporcionar un reemplazo visible.

Recapitulación

  • Cada elemento HTML es una caja rectangular: contenido + padding + border + margin.
  • Con box-sizing: content-box (defecto), width es solo el contenido. Con border-box, width incluye padding y borde. Aplicar border-box globalmente simplifica la maquetación.
  • margin y padding aceptan 1 a 4 valores (arriba, derecha, abajo, izquierda). margin: 0 auto centra elementos de bloque con ancho definido.
  • Los márgenes verticales entre elementos se colapsan: queda el mayor, no la suma.
  • border acepta grosor, estilo y color. Se puede controlar por lado. border-radius redondea las esquinas.
  • overflow controla el desbordamiento: hidden, scroll, auto. overflow-x: auto es el patrón para tablas anchas.
  • outline es un contorno que no ocupa espacio. Su uso principal es el indicador de foco de teclado.

Tu proyecto

Añade box-sizing: border-box como regla global (el estándar en cualquier proyecto real) y da al <header> y las secciones un respiro con padding:

*, *::before, *::after {
    box-sizing: border-box;
}

header {
    padding: 3rem 2rem 2rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 3rem;
}

main section {
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
}

footer {
    padding: 3rem 2rem;
    margin-top: 3rem;
    background-color: #f5f5f3;
}

En la próxima lección: posicionamiento y float: cómo sacar elementos del flujo normal y controlar su posición en la página.

TOP