Etiquetas de bloque y en línea

Las diferentes etiquetas tienen un comportamiento por defecto. Algunas de ellas se distribuyen de manera apilada, es decir, de arriba hacia abajo, como una torre.

<p>Uno</p>
<p>Dos</p>
<p>Tres</p>

Mientras que hay algunas que se distribuyen a lo largo del mismo renglón.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>

Este comportamiento se debe a un concepto llamado nivel.

La forma de cambiarlo es mediante la propiedad display. Los valores más comunes son block, lo que hace que se ordenen en pila. E inline lo que hace que se ordenen sobre el mismo renglón.

Algunas etiquetas que están a nivel de bloque son:

• <h1> - <h6>
• <p>
• <div>
• <hr>
• <ol>
• <ul>
• <li>

Algunas etiquetas que están a nivel en línea son:

• <a>
• <br>
• <button>
• <em>
• <img>
• <span>

A pesar de que los navegadores le dan uno de estos comportamientos a las diferentes etiquetas, podemos cambiarlo con CSS.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>
<style>
  span {
    display: block;
  }
</style>

Comentarios

Rutas relacionadas

Web Dev (Frontend)