Display

Lección 02 de 37 · 3 min

Cada caja tiene un tipo de display. Ese tipo decide si la caja arranca en una línea nueva o fluye con el texto, y si respeta el tamaño que le pedís.

Tres valores

La propiedad display define cómo se acomoda una caja respecto de las demás. Estos son los tres valores básicos:

BloqueblockArranca en una línea nueva y, sin width, ocupa todo el ancho. Respeta width, height y los márgenes.
En líneainlineFluye dentro de la línea de texto, como una palabra más. Su tamaño lo pone el contenido.
Bloque en líneainline-blockFluye en la línea como inline, pero por dentro es un bloque: respeta width, height y los márgenes.

Elegí un valor y mirá cómo se acomodan las tres etiquetas dentro del párrafo. Las tres piden 64 × 40px; el contorno naranja es la caja que les da el navegador.

blockinlineinline-blocknone

64 × 40px cada una

palta tomate arroz

visibility: hidden

ingrediente.css

.ingrediente {
  display: inline-block;
  width: 64px;
  height: 40px;
  padding: 8px;
  margin: 8px;
}

ingrediente.html

<span class="inline-block w-16 h-10 p-2 m-2">palta</span>
<span class="inline-block w-16 h-10 p-2 m-2">tomate</span>
<span class="inline-block w-16 h-10 p-2 m-2">arroz</span>

Qué ignora inline

Una caja inline se mide por su contenido: ignora width y height, el margen de arriba y de abajo no se aplica, y el padding vertical se pinta pero no empuja las líneas vecinas: se les superpone.

Cada elemento HTML trae un display por defecto. div, p y h1 son block; span, a y strong son inline. img también es inline, pero como es un elemento reemplazado sí respeta width y height.

Si un elemento inline necesita tamaño o margen vertical, pasalo a inline-block:

etiqueta.css

1.etiqueta {
2  display: inline-block;
3  padding: 4px 8px;
4  margin-block: 8px; /* ahora sí separa las líneas */
5}

Ocultar una caja

Hay dos formas de ocultar una caja, y no hacen lo mismo. Con display: none la caja deja de existir para el layout y el resto cierra el hueco. Con visibility: hidden es invisible, pero conserva su lugar.

En los dos casos la caja no se puede enfocar y los lectores de pantalla la saltean. El atributo hidden de HTML aplica display: none por defecto.

En realidad display describe dos cosas: cómo se acomoda la caja afuera y cómo acomoda a sus hijos adentro. Por eso CSS también acepta una sintaxis de dos valores:

styles.css

1display: block;        /* = block flow */
2display: inline;       /* = inline flow */
3display: inline-block; /* = inline flow-root */

La forma de una palabra sigue siendo la más usada. Flex y grid, que vienen más adelante, cambian el valor de adentro.

En Tailwind

Cada valor de display es una clase con el mismo nombre, salvo display: none, que se llama hidden. Las etiquetas de la demo quedan como inline-block w-16 h-10 p-2 m-2.

CSS	Tailwind
display: block	block
display: inline	inline
display: inline-block	inline-block
display: flow-root	flow-root
display: none	hidden
visibility: hidden	invisible
display según el ancho	hidden md:block

menu.html

1<nav class="hidden md:block">…</nav>
2<span class="inline-block px-2 py-1 my-2">etiqueta</span>
3<div class="flow-root">…</div>

Display

Lesson 02 of 37 · 3 min

Every box has a display type. That type decides whether the box starts on a new line or flows with the text, and whether it honours the size you ask for.

Three values

The display property sets how a box sits next to the others. These are the three basic values:

BlockblockStarts on a new line and, without a width, takes the whole width. It honours width, height and margins.
InlineinlineFlows inside the line of text, like one more word. Its content sets its size.
Inline blockinline-blockFlows in the line like inline, but on the inside it's a block: it honours width, height and margins.

Pick a value and watch how the three tags settle inside the paragraph. All three ask for 64 × 40px; the orange outline is the box the browser gives them.

blockinlineinline-blocknone

64 × 40px each

kale tomato rice

visibility: hidden

ingredient.css

.ingredient {
  display: inline-block;
  width: 64px;
  height: 40px;
  padding: 8px;
  margin: 8px;
}

ingredient.html

<span class="inline-block w-16 h-10 p-2 m-2">kale</span>
<span class="inline-block w-16 h-10 p-2 m-2">tomato</span>
<span class="inline-block w-16 h-10 p-2 m-2">rice</span>

What inline ignores

An inline box is sized by its content: it ignores width and height, the top and bottom margins don't apply, and the vertical padding is painted but doesn't push the neighbouring lines: it overlaps them.

Every HTML element comes with a default display. div, p and h1 are block; span, a and strong are inline. img is inline too, but since it's a replaced element it does honour width and height.

If an inline element needs a size or vertical margin, switch it to inline-block:

tag.css

1.tag {
2  display: inline-block;
3  padding: 4px 8px;
4  margin-block: 8px; /* now it does push the lines apart */
5}

Hiding a box

There are two ways to hide a box, and they don't do the same thing. With display: none the box stops existing for the layout and the rest closes the gap. With visibility: hidden it's invisible, but keeps its room.

In both cases the box can't be focused and screen readers skip it. The HTML hidden attribute applies display: none by default.

Display actually describes two things: how the box sits on the outside and how it lays out its children on the inside. That's why CSS also accepts a two-value syntax:

styles.css

1display: block;        /* = block flow */
2display: inline;       /* = inline flow */
3display: inline-block; /* = inline flow-root */

The one-word form is still the usual one. Flex and grid, which come later, change the inside value.

In Tailwind

Every display value is a class with the same name, except display: none, which is called hidden. The demo tags become inline-block w-16 h-10 p-2 m-2.

CSS	Tailwind
display: block	block
display: inline	inline
display: inline-block	inline-block
display: flow-root	flow-root
display: none	hidden
visibility: hidden	invisible
display by screen width	hidden md:block

menu.html

1<nav class="hidden md:block">…</nav>
2<span class="inline-block px-2 py-1 my-2">tag</span>
3<div class="flow-root">…</div>