La propiedad display

¿Qué es inline?

Como norma general (con excepciones) los elementos que se utilizan dentro de un párrafo, son de tipo inline. Este tipo se caracteriza por varias cosas:

• 1️⃣ Los elementos se alinean uno detrás de otro (en horizontal).
• 2️⃣ Su tamaño o dimensiones se adaptan al de su contenido.
• 3️⃣ Aunque uses width o height, se ignora y no cambia tamaño.

Por ejemplo, todos los elementos <span> o <strong> se comportan como elementos en línea (inline), mientras que los elementos <div> por defecto se comportan como elementos en bloque (lo explicaremos en el siguiente apartado):

div {
  background: darkblue;
  color: white;
}

span {
  background: darkred;
  color: white;
}

<div>Ejemplo de bloque</div>
<div>Ejemplo de bloque</div>
<span>Ejemplo de span</span>
<span>Ejemplo de span</span>

Observa, que aún sin haberlo indicado, los elementos <div> se comportan como si tuvieran un display: block y los elementos <span> se comportan como si tuvieran un display: inline.

No obstante, nosotros podemos forzar y cambiar su tipo:

div {
  background: darkblue;
  color: white;
  display: inline;
}

span {
  background: darkred;
  color: white;
}

<div>Ejemplo de bloque</div>
<div>Ejemplo de bloque</div>
<span>Ejemplo de span</span>
<span>Ejemplo de span</span>

Observa que ahora, tanto <div> como <span> se comportan de la misma forma: como un elemento en línea. Normalmente, este tipo de representación de elementos se usa para agrupar fragmentos de texto.

¿Qué es block?

Por su parte, los elementos que se utilizan para agrupar otros elementos HTML, por norma general, son de tipo block. Este tipo de elementos se caracteriza por lo siguiente:

• 1️⃣ Los elementos se apilan uno encima de otro (en vertical).
• 2️⃣ Por defecto, usa todo el ancho (en horizontal) disponible.
• 3️⃣ Si usas width o height, obedece y cambia el tamaño del elemento.

Por ejemplo, todos los elementos <div> se comportan como elementos de bloque (block). En este ejemplo, además, aunque los elementos <span> se comportan como elementos en línea, vamos a cambiarlos con display para que se comporten como elementos en bloque, apilándose unos encima de otros:

div {
  background: darkblue;
  color: white;
}

span {
  background: darkred;
  color: white;
  display: block;
}

<div>Ejemplo de bloque</div>
<div>Ejemplo de bloque</div>
<span>Ejemplo de span</span>
<span>Ejemplo de span</span>

Normalmente, este tipo de representación de elementos se usa para agrupar múltiples elementos HTML y organizarlos.

¿Qué es inline-block?

Si utilizamos la propiedad display con el valor inline-block, conseguiremos un elemento que funcionará como si fuera un elemento inline, pero obedeciendo a las propiedades width y height, las cuales se ignoran si estamos utilizando un display: inline.

Se trata de una especie de híbrido entre inline y block:

div {
  background: darkblue;
  color: white;
}

span {
  background: darkred;
  color: white;
  width: 200px;
}

.inline-block {
  background: green;
  color: white;
  display: inline-block;
  width: 300px;
}

<div>Ejemplo de bloque</div>
<div>Ejemplo de bloque</div>
<span>Ejemplo de span</span>
<span>Ejemplo de span</span>
<span class="inline-block">Ejemplo de inline-block</span>
<span class="inline-block">Ejemplo de inline-block</span>

Observa que en el caso del elemento <span> (inline), el navegador ignora las dimensiones de ancho que le hemos indicado, al contrario que en los <div> (block) o en el elemento inline-block. El valor inline-block nos puede venir muy bien cuando necesitamos una mezcla de ambos: donde se comporte como un inline pero que haga caso a las medidas de dimensión como los block.

¿Qué es list-item?

Aunque no es muy utilizado hoy en día, el valor list-item se puede utilizar para que un elemento se represente visualmente como los ítems de una lista:

.list {
  margin: 2.5rem;

  & div {
    background: green;
    display: list-item;
  }
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<div class="list">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

De esta forma, podemos renderizar como elementos de una lista a elementos HTML que no lo sean realmente. Ten en cuenta que aunque se pueda hacer esto, se recomienda utilizar el HTML de una lista, salvo en casos donde no tengas más remedio.

¿Qué es table?

Tampoco es demasiado utilizado hoy en día, pero mediante el valor table en la propiedad display podemos obligar a un elemento cualquiera a renderizarse como si fuera una tabla. De la misma forma, tenemos los valores table-cell y table-row para renderizar elementos como celdas de una tabla o filas de una tabla, respectivamente:

table {
  border: 1px solid #555;
  margin-bottom: 1rem;
}

.table {
  display: table;
  border: 1px solid green;

  & .row {
    display: table-row;
  }
  & .cell {
    display: table-cell;
    padding: 0.25rem;
  }
}

<table>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
</table>

<div class="table">
  <div class="row">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
  </div>
  <div class="row">
    <div class="cell">Item 3</div>
    <div class="cell">Item 4</div>
  </div>
</div>

De la misma forma que con las listas, se recomienda utilizar HTML basado en <table> si tenemos la oportunidad. Sólo utilizar esto si no tenemos más remedio.