Encabezado fijo que no tapa el destino de un ancla: scroll-padding-top

Si tu página tiene un encabezado fijo (position: sticky o fixed) y un índice con enlaces a #secciones, seguro te pasó: al saltar, el título de la sección queda escondido debajo del encabezado. El navegador pone el destino en el borde de arriba de la ventana, justo donde está la barra. Una línea de CSS lo arregla.

La solución: scroll-padding-top

<header class="fijo">
  <nav><a href="#uno">Uno</a> <a href="#dos">Dos</a> <a href="#tres">Tres</a></nav>
</header>
<main>
  <section id="uno"><h2>Uno</h2><p>Contenido de la primera sección.</p></section>
  <section id="dos"><h2>Dos</h2><p>Contenido de la segunda sección.</p></section>
  <section id="tres"><h2>Tres</h2><p>Contenido de la tercera sección.</p></section>
</main>

body { font-family: system-ui, sans-serif; }
html {
  scroll-padding-top: 4.5rem;   /* 72 px: lo que mide la cabecera, y un poco más */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.fijo {
  position: sticky;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #0f1f33;
}
.fijo a { color: white; margin-right: 12px; }
section { min-height: 420px; padding: 0 16px; border-top: 1px solid #e3e8ee; }
section:last-child { min-height: 100vh; }   /* para que la última pueda subir hasta arriba */

Pulsa «Tres» en el resultado. scroll-padding-top en html le dice al navegador que, al saltar a un ancla, deje ese espacio libre arriba. Medido en los tres navegadores: la cabecera mide 56 px y la sección «Tres» queda a 72 px del borde, debajo de ella y no detrás.

Sin esa regla, la misma prueba deja la sección a 0 px: es decir, con su título tapado por la cabecera.

Por sección: scroll-margin-top

/* Solo para ciertos destinos, o si cada uno necesita un espacio distinto */
h2[id] {
  scroll-margin-top: 80px;
}

scroll-margin-top va en el elemento de destino, no en la página. Sirve cuando solo algunos destinos lo necesitan o cuando la cabecera cambia de alto según la sección. Las dos propiedades se suman, así que usa una u otra.

Desplazamiento suave, pero no para todos

scroll-behavior: smooth hace que el salto sea un desplazamiento animado. A quien activó «reducir movimiento» en su sistema ese viaje le puede marear, por eso en el ejemplo va dentro de @media (prefers-reduced-motion: no-preference): solo se anima si la persona no pidió lo contrario. Más en respetar reducir movimiento.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.