Insertar espacio vertical en HTML

Para añadir espacio vertical entre elementos HTML, usa margin o padding de CSS; las líneas en blanco repetidas en el código HTML no crean separaciones fiables porque los navegadores colapsan los espacios en blanco normales. Usa <br> cuando el salto de línea forme parte del contenido, como en una dirección. Usa <hr> para indicar un cambio temático y <pre> para texto cuyo espaciado y saltos de línea deban conservarse.

Insertar espacio vertical con el elemento HTML <br>

El elemento <br> inicia una nueva línea dentro del mismo bloque de texto. Es adecuado para contenido en el que cada línea importa, como una dirección postal:

<p>HubSpot, Inc.<br>35 St. 2<br>California, USA</p>

Usa párrafos separados o CSS para crear bloques distintos y controlar el espacio entre ellos. Añadir varios elementos <br> para desplazar el contenido hacia abajo vincula la presentación al marcado y dificulta ajustar el espaciado de forma coherente.

Controlar el espaciado vertical con márgenes y relleno de CSS

Para controlar el espaciado del diseño, CSS permite establecer un valor coherente y ajustarlo independientemente del texto. El margen queda fuera del borde de un elemento; el relleno queda dentro del borde, entre este y el contenido. El diagrama existente del modelo de caja de CSS ilustra estas capas.

Por ejemplo, añade un margen inferior a los párrafos para dejar espacio después de cada uno:

p { margin-bottom: 1rem; }

La propiedad margin-bottom crea espacio fuera del borde del párrafo. Elige un valor como 1rem, que se adapta al tamaño de fuente raíz, y ajústalo al diseño circundante. Los márgenes verticales adyacentes pueden colapsar, por lo que el espacio visible entre dos bloques puede corresponder al margen mayor y no a la suma de ambos.

Usa padding-bottom cuando el espacio adicional deba quedar dentro del elemento, por ejemplo, si quieres que el fondo o el borde también cubran ese espacio:

p { padding-bottom: 1rem; }

El relleno aumenta el tamaño de la caja del elemento y puede afectar sus dimensiones totales. Aplícalo al elemento o componente pertinente y ten en cuenta el fondo y el borde previstos al elegir el método de espaciado.

Puedes mantener juntos el marcado y los estilos de una página completa. Este ejemplo de JavaScript imprime el código fuente de una página HTML sencilla con un espaciado uniforme entre párrafos:

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>
</html>`;
console.log(page);

El script imprime el código fuente HTML; el navegador aplica el CSS cuando se abre ese código como página. La visualización del texto por sí sola no muestra el espaciado renderizado.

Reutilizar reglas de espaciado con una clase CSS

Si solo algunos elementos necesitan la misma separación, define una clase reutilizable en lugar de modificar todos los párrafos:

.spacer { margin-bottom: 1rem; }

Aplícala donde necesites el espacio; por ejemplo: <p class="spacer">First paragraph.</p><p>Second paragraph.</p>. La clase .spacer mantiene el valor en una sola regla, así que puedes ajustar a la vez las separaciones seleccionadas. Si la regla pertenece a un componente concreto, elige un nombre que describa la función de ese componente.

Usar <hr> y <pre> para el propósito que les corresponde

El elemento <hr> representa un cambio temático entre partes de una página. Los navegadores suelen mostrarlo como una línea horizontal, con un espaciado predeterminado que puede modificarse mediante CSS. No es un separador en blanco: úsalo cuando haya un cambio significativo de tema o de escena.

El elemento <pre> presenta texto preformateado y conserva los espacios y saltos de línea de su contenido. Es útil para código u otro texto cuyo formato sea importante. No conserva las líneas en blanco del HTML circundante como técnica general de diseño. Para añadir espacio alrededor de un bloque <pre>, define márgenes o relleno CSS en el elemento.