La propiedad display

Conceptos fundamentales de maquetación


Probablemente, una de las partes más complejas de CSS sea la creación de layouts, colocación y distribución de los elementos de una página. Sin embargo, es una parte fundamental dentro de CSS, y es necesario entenderla correctamente para que resulte más fácil de trabajar y crear nuestros diseños.

¿Qué es inline y block?

Antes de comenzar, debemos saber que cada etiqueta HTML tiene un «tipo de representación visual» en el navegador, lo que habitualmente se suele denominar el tipo de caja. Si no sabes nada sobre esto, te aconsejo echarle un vistazo antes al apartado Modelo de cajas.

Todos los elementos de una página web deben tener un tipo de representación, que es la forma en la que se va a comportar. En principio, partimos de dos tipos básicos y fundamentales llamados inline y block:

ValorDenominaciónSignificadoLimitacionesEjemplo
inlineElemento en líneaSe coloca a continuación del otro (en horizontal).Ignora dimensiones.<span>
blockElemento en bloqueSe coloca encima de otro (en vertical).<div>

Como se menciona en la tabla anterior, por defecto, todos los elementos <div> se comportan como elementos de bloque (block) y todos los elementos <span> se comportan como elementos en línea (inline). Sin embargo, también podemos cambiar su comportamiento manualmente con CSS. Para entender esto facilmente, vamos a hacerlo todo con un <div> y alterarlo mediante la propiedad display:

div {
  color: white;
  margin: 1px;
}

.block {
  background: darkblue;
  /* display: block; */
}

.inline {
  background: darkred;
  display: inline;
}
<div class="block">Elemento 1</div>
<div class="block">Elemento 2</div>
<div class="inline">Elemento 3</div>
<div class="inline">Elemento 4</div>

Observa que nuestro navegador muestra 4 cajas: dos azules y dos rojas. Este sería el comportamiento por defecto si utilizaramos dos <div> y dos <span>. Sin embargo, si observas el código fuente, hemos utilizado cuatro <div>, pero hemos alterado su representación mediante la propiedad display:

  • Los <div> por defecto tienen un display: block, por lo que no hace falta aplicarlo con display.
  • Los elementos en bloque ocupan el ancho completo del padre y se aplican uno debajo del otro.
  • Los <div> (rojos) con clase .inline se convierten en elementos en línea.
  • Los elementos en línea ocupan el ancho de su contenido y se aplican uno al lado del otro.

Pasemos a analizar detalladamente esto, para entenderlo mejor.

La propiedad display

Como hemos dicho, por defecto cada elemento HTML tiene un tipo de representación concreto. Como norma general (con excepciones) los elementos que se utilizan dentro de un párrafo, son de tipo inline, mientras que los que se utilizan para agrupar otros elementos, son de tipo block.

PropiedadValoresDescripción
displaynone | tipoCambia el tipo de representación del elemento al indicado.

La propiedad display de CSS modifica la representación de un elemento HTML, cambiándolo al que le indiquemos; por ejemplo inline o block (u otros que veremos más adelante). Existe una amplia gama de tipos de representación de elementos HTML que podemos utilizar mediante la propiedad display.

Veamos cuales son en la siguiente tabla:

Tipo de cajaCaracterísticasMás info
Básicos
inlineSe coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height.
blockSe apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
inline-blockCombinación de los dos anteriores. Se comporta como inline pero no ignora width o height.
Elementos flexibles (flex)
flexUtiliza el modelo de cajas flexibles de CSS. Ideal para estructuras de 1 dimensión.Ver Flex CSS
inline-flexVersión en línea (ocupa sólo su contenido) del modelo de cajas flexibles de CSS.Ver Flex CSS
Elementos de cuadrículas (grid)
gridUtiliza cuadrículas o rejillas con el modelo de cajas Grid CSS.Ver Grid CSS
inline-gridLa versión en línea (ocupa sólo su contenido) del modelo de cajas Grid CSS.Ver Grid CSS
Invisible
noneOculta el elemento visualmente, como si no existiera en el HTML.

¿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 haciendo caso a las propiedades width y height, las cuales se ignoran si estamos utilizando un display: inline.

div {
  width: 350px;
  height: 50px;
  color: white;
}

.block {
  display: block;
  background: darkblue;
}

.inline {
  display: inline;
  background: darkred;
}

.inline-block {
  display: inline-block;
  background: indigo;
}
<div class="inline">Elemento inline</div>
<div class="block">Elemento block</div>
<div class="inline-block">Elemento inline-block</div>

Observa que en el caso del elemento .inline, el navegador ignora las dimensiones de ancho que le hemos indicado, al contrario que los otros dos. El valor inline-block nos puede venir muy bien cuando necesitamos una mezcla de los dos tipos básicos, donde se comporte como un inline pero que haga caso a las medidas de dimensión.

Otros valores

Como hemos podido observar, mediante la propiedad display podemos establecer diferentes mecanismos de maquetación, desde los básicos block e inline que hemos mencionado a otros que veremos más adelante como flex y grid, pero también tenemos otros menos utilizados:

Tipo de cajaCaracterísticasVer
Elementos de listas
list-itemActúa como un ítem de una lista. Es el comportamiento de etiquetas como <li>.Ver listas HTML
Elementos de tablas
tableActúa como una tabla. Es el comportamiento de etiquetas como <table>.Ver tablas HTML
table-cellActúa como la celda de una tabla. Es el comportamiento de etiquetas como <th> o <td>.Ver tablas HTML
table-rowActúa como la fila de una tabla. Es el comportamiento de etiquetas como <tr>.Ver tablas HTML
Otros
contentsIgnora la caja del elemento. Útil para mantener Grid/Flex aún teniendo un wrapper intermedio.Ver contents

El valor contents

Para este ejemplo, necesitaremos conocer previamente flex o grid. Utilizando display se puede conseguir un comportamiento muy especial, que puede ser realmente útil en algunas ocasiones, sobre todo cuando trabajamos con librerías de terceros, WebComponents o con Javascript (o ciertos frameworks).

Hay situaciones donde se puede arruinar el diseño de maquetaciones Grid o Flex, porque son sistemas que funcionan relacionando un elemento padre con su hijo, por lo que si se cambia el marcado HTML de forma que se rompa esa relación, el diseño deja de ser efectivo.

Imaginemos la siguiente situación, donde tenemos un layout creado con Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

.item {
  background: deeppink;
}
<div class="grid">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
</div>

Si introducimos un elemento con clase .middle dentro del .grid, que envuelva a todos los .item, el grid dejaría de funcionar porque se ha eliminado la relación padre-hijo entre .grid y los elementos .item. Sin embargo, si añadimos un .middle con un CSS asociado .middle { display: contents }, el navegador ignorará ese elemento intermedio que insertamos por razones de funcionalidad (normalmente en situaciones de sólo diseño no ocurre) y hará como que no existe:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

.item {
  background: deeppink;
}

.middle {
  display: contents;
}
<div class="grid">
  <div class="middle">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
    <div class="item item-6"></div>
  </div>
</div>

Observa que a pesar de que existe el <div> con clase middle entre .grid y los .items, sigue funcionando la relación entre ambos y conservando el estilo del grid.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev