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.

Volviendo al tema, 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.

Valor Denominación Significado Ejemplo
inline Elemento en línea El elemento se coloca a continuación del otro (en horizontal). <span>
block Elemento en bloque El elemento se 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). Para entender esto facilmente, crea un documento HTML con 3 etiquetas <div> como las siguientes:

<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>

<style>
div {
  background: blue;
  color: white;
  margin: 1px;
}
</style>

Con esto observaremos que en nuestro navegador nos aparecen 3 cajas azules colocadas en vertical (una debajo de otra) que cubren todo el ancho disponible de la página. Esto ocurre porque la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, un elemento que se apila uno encima de otro y ocupan todo el ancho de su contenedor padre. Cada etiqueta HTML tiene un tipo de representación concreta.

El comportamiento de los elementos HTML puede cambiarse mediante la propiedad CSS display. Por ejemplo, añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal (una al lado de la otra), cubriendo sólamente el ancho del contenido de cada una. Esto ocurre porque los <div> han pasado a comportarse como elementos en línea (el tipo de representación visual que tienen los <span> por defecto).

La propiedad display

Recordemos que, 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, son de tipo block. La propiedad display de CSS permite modificar el comportamiento de un elemento HTML, cambiándolo al que le indiquemos, como por ejemplo inline o block (u otro de los que veremos más adelante).

Propiedad Valores Descripción
display none | tipo Cambia el tipo de representación del elemento al indicado.

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 caja Características Ver
block Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
Versión en línea
inline Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height.
inline-block Combinación de los dos anteriores. Se comporta como inline pero no ignora width o height.
Versión flexible
flex Utiliza el modelo de cajas flexibles de CSS. Ideal para estructuras de 1 dimensión. Ver Flexbox CSS
inline-flex Versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles de CSS. Ver Flexbox CSS
Versión de cuadrículas
grid Utiliza cuadrículas o rejillas con el modelo de cajas Grid CSS. Ver Grid CSS
inline-grid La versión en línea (ocupa sólo su contenido) del modelo de cajas grid css. Ver Grid CSS
Versión de listas y tablas
list-item Actúa como un ítem de una lista. Es el comportamiento de etiquetas como <li>. Ver listas HTML
table Actúa como una tabla. Es el comportamiento de etiquetas como <table>. Ver tablas HTML
table-cell Actúa como la celda de una tabla. Es el comportamiento de etiquetas como <th> o <td>. Ver tablas HTML
table-row Actúa como la fila de una tabla. Es el comportamiento de etiquetas como <tr>. Ver tablas HTML
Otros
contents Ignora la caja del elemento. Útil para mantener Grid/Flex aún teniendo un wrapper intermedio.
none Oculta el elemento visualmente, como si no existiera en el HTML.

Como se puede observar, mediante la propiedad display podemos establecer diferentes mecanismos de maquetación, desde los básicos block e inline que hemos mencionado, pero tenemos muchos más.

El valor 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>Elemento 1</div>
<div>Elemento 2</div>

<style>
  div {
    display: inline-block;
    width: 250px;
    background: steelblue;
    color: white;
  }
</style>

Esto nos puede venir muy bien cuando necesitamos una mezcla de los dos tipos básicos.

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:

<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>

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

  .item {
    background: deeppink;
  }
</style>

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.

Otros valores

Mediante la propiedad display también podemos utilizar flex, grid, list-item o table (o cualquiera de sus derivados). Para comprender como funcionan, es recomendable acceder a su sección específica, donde se explicará más en profundidad.

Visibilidad

Existen múltiples formas de ocultar elementos del HTML, de forma que se ocultan visualmente pero el marcado de etiquetas HTML continua existiendo en la página. Vamos a explicar cada una de ellas:

Propiedad Valores Descripción Más info
display none Oculta de forma visual y por completo el elemento indicado.
visibility visible | hidden | collapse* Oculta un elemento manteniendo su espacio visual.
opacity 1 | Opacidad del elemento, medido en valores numéricos o porcentajes. Ver opacity

La propiedad display: none

Quizás, la forma más habitual de ocultar un elemento es utilizar el valor none de la propiedad display. Esto hace que el navegador ignore por completo ese elemento, no mostrándolo visualmente. Sin embargo, existen algunas otras formas con ciertas diferencias y matices.

La propiedad visibility

Existe una propiedad CSS llamada visibility que podemos utilizar con el valor hidden. Realiza una acción similar a display: none con la ligera diferencia de que no sólo oculta el elemento, sino que además mantiene el «hueco», el espacio vacío (con el mismo tamaño que cuando se mostraba).

Dicha propiedad visibility tiene los siguientes valores posibles:

Valor Significado
visible El elemento es visible. Valor por defecto.
hidden El elemento no es visible pero sigue ocupando su espacio y posición.
collapse Sólo para tablas. El elemento se contrae para no ocupar espacio.

Utilizar visibility: hidden es muy interesante si queremos que un elemento y su contenido se vuelva invisible, pero siga ocupando su espacio y así evitar que los elementos adyacentes se desplacen, lo que suele ser un comportamiento no deseado en muchas ocasiones.

La propiedad opacity

Por otro lado, otra opción interesante y relacionada podría ser la posibilidad de utilizar la propiedad opacity, especialmente útil si se utiliza junto a transiciones o animaciones.

La propiedad opacity permite indicar valores numéricos desde 0 a 1, pudiendo indicar decimales. Si lo prefieres, puedes utilizar valores en porcentaje, de modo que el valor 0.5 es equivalente a usar 50%. Estos valores, al ser cuantificables, el navegador sabe perfectamente como transicionarlos o animarlos y se pueden hacer efectos donde elementos aparezcan o se desvanezcan gradualmente.

Tienes más información detallada en el artículo dedicado a la propiedad opacity y el artículo donde hablamos de las transiciones CSS.

¿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