¿Cuándo usas inline-block? | Programar Plus

El inline-block valor por display es un clásico! No es nuevo y la compatibilidad con el navegador ciertamente no es algo de lo que deba preocuparse. Estoy seguro de que muchos de nosotros lo buscamos de forma intuitiva. Pero pongámosle un punto. ¿Para qué es realmente útil? ¿Cuándo lo elige entre otras opciones, quizás similares?

(Apuesto a que esto genera respuestas interesantes).

¿Para qué fue lo último que usó `display: inline-block`?

– Chris Coyier (@chriscoyier) 19 de junio de 2020

Botones

La respuesta más común que escuché fue: siempre lo uso en botones.

En última instancia, creo que tiene sentido, pero contribuye a lo que veo como un ligero malentendido. La idea es que desee elementos que parezcan botones (que pueden estar elaborados con <a>, <button>, o quizás <input>) para colocarlos en línea, como lo hacen de forma natural, pero poder tener margen y relleno. Esa es la parte del ligero malentendido: display: inline; los elementos todavía pueden tener margin y padding, y probablemente se comporte como esperabas.

La parte complicada es que:

• El margen de la dirección del bloque en los elementos en línea se ignora por completo
• El relleno de los elementos en línea no afecta la altura de la línea de texto

Entonces, si bien los botones en sí tienen un estilo bastante bueno, el elemento principal y el texto circundante probablemente no lo sean. Aquí hay una demostración que:

El relleno de los botones en línea los saca del contenedor, lo cual es un poco extraño.

Las cosas empeoran cuando el ajuste comienza a suceder con botones en línea:

Así que sí, inline-block tiene bastante sentido en los botones, diría yo. Pero…

No olvides inline-flex y inline-grid

Con el display valores inline-flex y inline-grid, obtendrás el mismo buen comportamiento que obtendrás de inline-block, pero los elementos (a menudo botones) pueden beneficiarse de un sistema de diseño en línea más sólido.

Tome el ejemplo de botones con iconos, como este:

<a href="https://css-tricks.com/when-do-you-use-inline-block/#" class="button>
  <svg> ... </svg>
  Text
</a>

Para alinear el texto y el ícono perfectamente en el centro, es tentador hacer lo siguiente:

.button svg {
  vertical-align: middle;
}

Que nunca lo hace del todo bien …

Esos íconos están colocados a uno o dos píxeles demasiado abajo del centro, al menos para mi ojo.

Pero esta es una solución fácil con inline-flex:

.button {
  display: inline-flex;
  align-items: center;
}

Iconos perfectamente alineados (y algún día podremos ajustar el tamaño usando lh unidades muy bien!)

Con inline-flex o inline-grid, tiene todo el poder de un sistema de diseño de cuadrícula o caja flexible dentro de un bloque que se coloca en la dirección en línea.

Bloques que aún se pueden envolver

Un inline-block los elementos respetarán un width. Esa es otra diferencia entre ellos y directamente inline elementos. La gente solía construir sistemas de disposición de columnas con inline-block, porque básicamente puede hacer lo que los flotadores podrían hacer aquí, excepto sin la necesidad de preocuparse por limpiar el flotador², lo que permite a la gente aprovechar la envoltura, que ocurre de forma un poco más elegante que el flotador.

La idea de que los bloques en línea se comporten como columnas que se pueden ajustar (incluso hasta 1 columna) sigue viva hasta el día de hoy porque es un truco que se puede usar en los correos electrónicos HTML para permitir diseños de varias columnas que se colapsan en una sola columna en pequeños pantallas sin la necesidad de consultas de medios (que algunos clientes de correo electrónico no admiten).

Ayer en un correo electrónico HTML, en divs que envuelven tablas, para permitir columnas receptivas sin consultas de medios

– Dan Denney (@dandenney) 19 de junio de 2020

El ejemplo de Dan.

transform en un elemento en línea

Los elementos en línea no pueden tomar un transform. Entonces, si lo necesita, tendrá que ser inline-block.

Columna de niños que no se rompen en medio de ellos mismos.

Las columnas CSS se pueden usar en párrafos de texto en los que realmente no le importa si un párrafo determinado se rompe en las columnas. Pero a veces las columnas CSS se usan para bloques donde eso sería incómodo. Digamos que los bloques tienen sus propios fondos y relleno. Los descansos son bastante extraños visualmente.

Este es un truco extraño que no puedo decir que lo entienda al 100%, pero si arrojas display: inline-block; en esas cajas (y probablemente width: 100%; para asegurarse de que permanezcan en el ancho de la columna), entonces no se romperán y se conservará el relleno.

Manifestación

Manera rápida de hacer que una lista sea horizontal

Esta fue otra respuesta mega-popular a mi tweet original. Los elementos de lista apilan los elementos de lista verticalmente, como elementos a nivel de bloque. En realidad, no son bloques. Ellos son display: list-item;, que en realidad es algo importante aquí, como veremos. El caso de uso popular es “cuando quiero diseñar una lista horizontalmente”.

Entonces tienes una lista …

<ul>
  <li>Three</li>
  <li>Little</li>
  <li>Piggies</li>
</ul>

Si quieres derribarlo en una fila, puedes …

li {
  display: inline-block;
}

Y lo tienes.

Escuché rápidamente en VoiceOver y el inline-block list todavía anuncia el elemento como una lista, pero no dice las viñetas, lo que tiene sentido ya que no están allí. Eso es lo que pasa con cambiar el display de los elementos de la lista ellos mismos lejos de list-item: pierden su, ejem, el elemento de lista.

Una alternativa sería convertir al padre en un contenedor flexbox …

ul {
  display: flex;
}

… que logra la cosa de la fila horizontal (el flexbox predeterminado), pero deja las viñetas ya que no está cambiando la visualización de los elementos de la lista. Depende de usted eliminarlo manualmente si lo desea.

Manifestación

Listas centradas

Hablando de listas, Jeff Starr acaba de escribir en su blog sobre la idea de listas dentro de texto centrado, lo que también puede resultar incómodo. La incomodidad es que el texto dentro de los elementos de la lista se puede centrar, pero el elemento de la lista en sí sigue siendo de ancho completo, creando esta situación en la que la viñeta permanece alineada a la izquierda.

La solución de Jeff fue inline-block toda la lista. Eso mantiene la lista solo tan amplia como el ancho natural del contenido, lo que permite que las viñetas salgan del borde izquierdo y viajen con el contenido centrado. Siempre que haya elementos a nivel de bloque antes y después, esa es una buena solución.

A modo de alternativa, si el objetivo es reducir el ancho de la lista al ancho del contenido, eso también podría lograrse así sin que la lista deje de ser a nivel de bloque:

ul {
  width: max-content;
  margin: 0 auto;
  text-align: left;
}

1. Hay otra cosa complicada con inline-block. Me gusta inline elementos, cualquier espacio en blanco entre ellos se representa esencialmente como un espacio. Por lo tanto, dos elementos `inline-block` de 50% de ancho no encajarán en una línea si hay algún espacio en blanco entre ellos. Menos mal que hay trucos para solucionarlo.
2. Digo “solía” porque, si fueras a hacer un sistema de columnas hoy, es casi seguro que usarías flexbox o grid, o no construirías un “sistema” en absoluto porque el solo uso de la sintaxis de estos en gran medida niega la necesidad de un sistema en primer lugar.