Enlaces con cajas de bloque

En el ejercicio anterior añadimos márgenes y relleno a los enlaces. Sin embargo, no aparecieron los márgenes verticales y el relleno sobresalió de la navegación. Por eso el fondo del enlace a la página actual se superpuso a la línea blanca.

Inicio

Rutas

Equipo

Esto ocurre porque los enlaces tienen cajas en línea de forma predeterminada. El navegador ignora sus márgenes verticales, y el relleno superior e inferior no afecta a la posición de los demás elementos ni a la altura de la línea.

Veamos un ejemplo con cuatro enlaces en dos líneas. Cada enlace tiene márgenes y relleno en todos los lados, además de su propio color de fondo:

Fíjate en que los enlaces se separaron horizontalmente: se aplicaron el relleno y los márgenes horizontales. En cambio, no aparecieron los márgenes verticales, y el relleno superior e inferior se superpuso e incluso sobresalió del contenedor. Este es el comportamiento habitual de las cajas en línea.

Necesitamos que los enlaces de la navegación respeten los márgenes superior e inferior y que su relleno vertical no sobresalga. La forma más sencilla de lograrlo es cambiar su tipo de caja. Por ejemplo, podemos convertirlos en cajas de bloque:

.element {
  display: block;
}

En las cajas de bloque se aplican todos los márgenes, y el relleno vertical se comporta igual que el horizontal.

Ya convertimos cajas de bloque en contenedores grid y flex. Del mismo modo, podemos convertir cajas en línea en cajas de bloque y viceversa. Esto no cambia la semántica de la etiqueta.

Convertiremos los enlaces en cajas de bloque y comprobaremos que se aplican los márgenes verticales.