Etiquetas de bloque y en línea

css

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>
Visualización

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

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>
Visualización

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>
Visualización

Comentarios