¿Cuál es el trato con la pantalla Inline-Block?

Hemos estado utilizando flotadores para el diseño desde que dejamos las mesas atrás. Es una solución peculiar que a menudo puede causar problemas, pero si sabes lo que estás haciendo, funciona.

Una alternativa interesante a los flotadores que la gente está recurriendo a más y más últimamente es establecer la monitor valor de un elemento para bloque en linea. ¿Qué hace esto exactamente? ¿Cómo es como un flotador? ¿Como es diferente? Vamos a sumergirnos y ver qué podemos descubrir.

La propiedad de visualización

Los navegadores web prestan diferentes elementos de diferentes maneras. Algunos elementos son de nivel de bloque, lo que significa que su valor predeterminado monitor el valor se establece en bloquear. Los elementos de nivel de bloque tienen un ancho y una altura definibles y crean automáticamente una nueva fila en el diseño a medida que se crean.

Un ejemplo de un elemento de nivel de bloque es un párrafo. Si tiro dos párrafos en un documento HTML, se apilan uno encima del otro en lugar de aparecer uno al lado del otro. Tengo mucha libertad sobre sus dimensiones y realmente puedo tratarlos como bloques de construcción individuales para moldearlos como me plazca.

Otros elementos tienen su monitor valor establecido en en línea por defecto. Esto significa que no tienen una altura y un ancho definibles y no crearán nuevas filas en un diseño (por lo tanto, aparecen "en línea"). Los elementos en línea son generalmente el tipo de cosa que instituyes dentro de un párrafo u otro elemento a nivel de bloque: strong, em, anchor, etc.

Esto es lo que sucede si tiro un montón de etiquetas de anclaje en un documento HTML. A diferencia de los párrafos anteriores, que se apilan automáticamente, estos elementos se crean uno al lado del otro. Su ancho y alto están determinados por el contenido que contienen y no se pueden anular manualmente como con los elementos de nivel de bloque.

Hay algunos otros básicos monitor valores predeterminados con los que probablemente estés familiarizado también. Por ejemplo, los elementos en el cabeza parte tiene una propiedad de visualización de ninguna.

Configuración de su propio valor de visualización

Una característica realmente interesante de CSS es la capacidad de cambiar el comportamiento de visualización predeterminado de los elementos. Aunque ya se ha establecido un comportamiento estándar para un elemento dado, podemos anularlo para nuestros propios propósitos.

Por ejemplo, podemos tomar fácilmente esas etiquetas de anclaje en línea del segundo ejemplo anterior y hacer que actúen más como los párrafos a nivel de bloque del primer ejemplo. Hacemos esto configurando la propiedad de visualización a bloquear en nuestro CSS.

Ahora nuestras etiquetas de anclaje se comportan como elementos a nivel de bloque, por lo que cada una crea una nueva línea y puede tener un valor de altura / ancho personalizado aplicado.

Como puede imaginar, es más difícil trabajar con el reverso de este ejemplo tomando un elemento de nivel de bloque y configurando monitor valor para en línea. Instintivamente, podrías usar pantalla: en línea para tratar de hacer que los dos párrafos anteriores aparezcan uno al lado del otro, pero cuando haces esto, el resultado es que los dos fluyen juntos en un solo párrafo.

Ahora hemos perdido toda la capacidad de establecer nuestro ancho y alto, por lo que los dos párrafos están inexorablemente integrados, lo cual no es en absoluto lo que buscábamos.

Elementos flotantes

Entonces, ¿qué sucede si queremos que los dos párrafos anteriores sigan siendo distintos pero aparezcan juntos como columnas individuales en lugar de agrupados en filas? La respuesta típica a la que muchos de nosotros hemos recurrido durante años es la flotación. Aplicando? Float: left? Para los párrafos, podemos mantener la funcionalidad a nivel de bloque al crear múltiples columnas de contenido.

Los flotadores vienen con algún comportamiento interesante. Por ejemplo, los elementos flotantes tienden a contraer su contenedor principal, lo que lleva a todo tipo de problemas desordenados si está aplicando colores de fondo o bordes. Para solucionar esto, tenemos algunos trucos. Podemos limpiar los elementos flotantes en un elemento nuevo (en estos días a menudo es un pseudo-elemento) al final del contenedor o uso desbordamiento: auto en el padre. Ambas correcciones tienen sus advertencias, pero si sabes cómo aprovechar cada una de ellas adecuadamente, normalmente puedes lograr cualquier hazaña de diseño sin demasiados problemas.

pantalla: inline-block

Hay toneladas de valores para la propiedad de visualización más allá de lo que ya hemos mencionado, algunos de los cuales son útiles, otros que dudo que alguna vez utilices. El tema de la discusión de hoy es, con mucho, uno de los más interesantes y útiles del grupo: bloque en linea.

Observe lo que sucede cuando tomamos nuestros dos párrafos del ejemplo original anterior y aplicamos una monitor valor de bloque en linea.

Se parece mucho a un flotador ¿verdad? Entonces, ¿qué pasa si agregamos en un contenedor principal? ¿Tiene el problema de colapso que vimos con flotadores? No Todo funciona exactamente como lo esperamos.

Lo que sucede aquí es que le estamos diciendo al navegador que muestre los párrafos en línea, pero que les permita conservar sus características de nivel de bloque. Esto significa que podemos establecer un ancho y una altura manualmente y que los dos elementos permanezcan distintos, pero también que aparezcan uno al lado del otro en el flujo de documentos. ¡Bastante astuto!

El problema de la alineación

En la superficie, bloque en linea Puede parecer el salvador de diseño que has estado esperando. ¿Quién quiere meterse con hacks de clearfix desordenado cuando puede omitirlo por completo con este método? Resulta que los flotadores no son el único método de diseño con peculiaridades, bloque en linea También tiene alguna extraña funcionalidad que tienes que envolver alrededor de tu cabeza.

Una de las primeras cosas en las que flotará y el bloque en línea se verá bastante diferente cuando tenga varios elementos con alturas variables. Por ejemplo, esto es lo que sucede cuando haces flotar un montón de párrafos a la izquierda:

Ahora, esto es lo que sucede cuando usa el bloque en línea para lograr lo mismo. Observe que los bordes inferiores de los párrafos se alinean en lugar de los superiores como en la imagen anterior.

Afortunadamente, esto no es un gran problema. Para solucionar el problema, asegúrese de configurar alineación vertical propiedad a parte superior.

El problema del espacio en blanco

Hay otro lugar importante en el que el comportamiento del bloque en línea difiere de los flotadores. Me parece extraño que cualquier cosa en HTML y CSS sea consciente del espacio en blanco cuando se trata de diseño, pero eso es exactamente lo que encontramos aquí. Considere los siguientes ejemplos.

Aquí podemos ver que cuando un grupo de elementos de lista se hace flotar, se chocan entre sí como es de esperar, lo que nos permite establecer manualmente el espacio sin ningún espacio adicional inesperado. Sin embargo, cuando hacemos lo mismo con el bloque en línea, hay un poco de espacio predeterminado que ni siquiera desaparecerá si establecemos nuestros márgenes en 0.

Como puede ver, una solución es sacar el espacio en blanco de nuestro HTML y empujar los elementos uno contra el otro. Una vez más, encuentro esto bastante confuso pero funciona. Una solución alternativa que produce el mismo resultado sin alterar la jerarquía visual en su HTML es aplicar un margen de -4px en los elementos de la lista.

Soporte del navegador

Ahora que sabemos qué es el bloque en línea y cómo funciona de manera diferente a los flotadores, es hora de discutir el tema favorito de todos: el soporte del navegador. ¿Qué atrocidades tendremos que emprender para asegurarnos de que esta técnica realmente funcione en general?

Cuando visitamos CanIUse.com para ver la respuesta, los resultados probablemente sean mucho mejores de lo que esperabas.

Aquí podemos ver que tenemos, al menos, soporte parcial en todos los ámbitos y soporte completo para todo menos IE7 y versiones anteriores (simulación de sorpresa y temor). La nota en la parte inferior nos informa que el bloque en línea solo es compatible con IE6 e IE7 en elementos con una visualización de 'en línea' de forma predeterminada. Esto significa que los ejemplos de párrafos que hemos usado en todo este artículo están fuera.

Afortunadamente, el blog de Mozilla publicó algunas correcciones para este camino en 2009. Para lograr que IE juegue bien, solo necesitamos activar hasLayout con la propiedad zoom y luego usar el truco estrella para apuntar a IE6 / 7 y configurar la pantalla en línea . Esto le permite tratar funcionalmente los elementos en línea como si fueran elementos de bloque en línea. Ciertamente no es bonito, pero hace el trabajo.

Otras lecturas

Si desea obtener más información sobre el bloque en línea, aquí hay algunos artículos que me parecieron particularmente útiles en mi investigación.

  • Flotador vs. Bloque en línea
  • ¿Qué es el bloque en línea?
  • bloque en línea: muchos ejemplos
  • Bloque en línea de navegador cruzado

¿Una mejor solución?

Para ser honesto, nunca antes he jugado demasiado con el bloqueo en línea antes de hoy, pero he visto más y más sugerencias en los comentarios que exploro este método como una alternativa a las flotillas, así que pensé que lo haría. el Consejo. Tenía la esperanza de que, de hecho, era una forma mágica y sin complicaciones, pero en realidad no lo es. Todavía hay varios comportamientos inesperados que debes conocer y responder, lo que da como resultado un código de hackers muy parecido al que solemos ver con los arreglos de compensación de flotación.

Sin embargo, para ser justos, es de hecho una forma bastante simple de lograr diseños tipo flotante. Y lo que es más importante, el CSS que debe implementar para asegurarse de que sea compatible con todos los navegadores es más breve que incluso el popular hack de micro clearfix de Nicolas Gallagher. Esto puede hacer que sea una mejor manera de ir para muchos proyectos.

En última instancia, creo que, de hecho, comenzaré a agregar este método a mi bolsa de trucos. Sospecho que ciertos momentos surgirán cuando los flotadores no sean ideales (ejemplo: los flotadores correctos representan todo lo contrario) y esta será una gran alternativa a tener en esas situaciones.

¿Qué piensas? ¿Es el bloque en línea una buena alternativa a los flotadores? ¿En qué situaciones se puede pensar dónde uno tiene claramente una ventaja sobre el otro?