¿Cuándo usas el bloque en línea?

¡ El inline-blockvalor displayes 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 alcanzamos de forma intuitiva. Pero pongámosle punto. ¿Para qué sirve realmente? ¿Cuándo lo eliges entre otras opciones, quizás similares?

(Apuesto a que esto genera respuestas interesantes).

¿Para qué fue lo último que usaste `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 eso tiene sentido, pero contribuye a lo que considero un ligero malentendido. La idea es que desea que los elementos que parecen botones (que podrían estar diseñados con a, buttono quizás input) se coloquen en línea, como lo hacen de forma natural, pero que puedan tener margen y relleno. Esa es la parte del pequeño malentendido: display: inline;los elementos aún pueden tener margin y paddingy probablemente se comporte como usted espera.

La parte complicada es que:

• El margen de dirección del bloque en 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:

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

Entonces sí, inline-blockdiría que tiene bastante sentido en los botones. Pero…

No lo olvides inline-flexyinline-grid

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

Tomemos el ejemplo de botones con iconos, como este:

a href="#"token tag"svg ... /svg  Text/a

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

.button svg {  vertical-align: middle;}

Lo cual nunca lo hace del todo bien…

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

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

Con inline-flexo inline-grid, tienes todo el poder de un flexbox o un sistema de diseño de cuadrícula dentro de un bloque que se dispone en dirección en línea.

Bloques que aún pueden envolver

Un inline-blockelementos respetará a width. Esa es otra diferencia entre ellos y los elementos simples inline. La gente solía ¹ construir sistemas de diseño 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 las personas aprovechar la envoltura, que ocurre de manera un poco más elegante que el flotador.

La idea de que los bloques en línea se comporten como columnas que pueden ajustarse (incluso hasta 1 columna) sigue vigente hasta el día de hoy porque es un truco que se puede usar en correos electrónicos HTML para permitir diseños de varias columnas que se contraen en una sola columna en pequeñas columnas. pantallas sin 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 responsivas sin consultas de medios

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

El ejemplo de Dan .

transformen un elemento en línea

Los elementos en línea no pueden aceptar un archivo transform. Entonces, si necesitas eso, tendrá que ser así inline-block.

Niños de columna que no se rompen por la mitad.

Las columnas CSS se pueden usar en párrafos de texto en los que realmente no le importa si un párrafo determinado se divide entre 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 entiendo al 100%, pero si colocas display: inline-block;esas cajas (y probablemente width: 100%;para asegurarte de que mantengan el ancho de la columna), no se romperán y el relleno se conserva.

Manera rápida de hacer que una lista quede horizontal

Esta fue otra respuesta muy popular a mi tweet original. Los elementos de lista apilan elementos de lista verticalmente, como elementos a nivel de bloque. En realidad, no son bloques. Lo son display: list-item;, lo cual 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  liThree/li  liLittle/li  liPiggies/li/ul

Si quieres derribarlo en una fila, puedes…

li {  display: inline-block;}

Y lo tienes.

Escuché rápidamente en VoiceOver y la inline-blocklista todavía anuncia el elemento como una lista, pero no dice las viñetas, lo cual tiene sentido ya que no están allí. Ese es el problema con cambiar los displayelementos de la lista list-item: pierden, ejem, su carácter de elemento de lista.

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

ul {  display: flex;}

…lo que logra la fila horizontal (el valor predeterminado de flexbox), 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.

Listas centradas

Speaking of lists, Jeff Starr just blogged about the idea of lists within centered text, which can get awkward as well. The awkwardness is that the text inside the list items can be centered, but the list item itself is still full-width, creating this situation where the bullet stays aligned to the left.

Jeff’s solution was to inline-block the whole list. That keeps the list only as wide as the natural width of the content, allowing the bullets to leave the left edge and travel with the centered content. As long as there are block-level elements before and after, that is a good solution.

By way of an alternative, if the goal is to shrink the width of the list to the width of the content, that could also be achieved like this without stopping the list from being block-level:

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

1. There is another tricky thing with inline-block. Like inline elements, any whitespace between them essentially renders as a space. So two 50% wide `inline-block` elements won’t fit on a line if there is any whitespace between them. Good thing there are tricks to fix that.
2. I say “used to” because, if you were going to make a column system today, you’d almost certainly use flexbox or grid — or not build a “system” at all because just using the syntax of these largely negates the need for a system in the first place.