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.

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

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:

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:

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:

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.