CSS: posición vertical inesperada de elementos "inline-block"

Por favor, considere el siguiente código HTML:CSS: posición vertical inesperada de elementos "inline-block"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>test</title> 
    <style> 
     .section { 
      display: inline-block; 
      border: 1px dashed blue; 
     } 
     .outer { 
      border: 1px dashed red; 
      margin: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div style="height: 500px; width: 200px;" class="section">a 
     <div style="height: 100px;" class="outer">1A<br />1B</div> 
    </div> 
    <div style="height: 500px; width: 200px;" class="section">b 
     <div style="height: 200px;" class="outer">2</div> 
     <div style="height: 200px;" class="outer">3<br />4<br />5</div> 
    </div> 
</body> 
</html>

Dado que ambos divs con clase ".Sección" tienen la misma altura, y están en línea bloques, yo esperaría que estuvieran alineados verticalmente. Sin embargo, el primero de estos divs se empuja hacia abajo, de modo que el texto "1B" se alinea con la línea de texto "5" de la otra sección. Agregar o eliminar líneas en cualquier div tiene un impacto directo en la posición vertical de mi primera sección.

No veo la lógica de esto, y tampoco puedo encontrar la respuesta en la documentación oficial de CSS3. Sin embargo, no parece ser un error, ya que es idéntico en Chrome 8, Safari 5, Opera 9.5 y Firefox 4 beta ... no intenté IE, ya que no es una referencia de todos modos.

Estoy buscando una explicación racional para este fenómeno. Por supuesto, hay varias soluciones (por ejemplo, cambiar el bloque en línea a la tabla en línea soluciona el problema, o podría usar bloques flotantes normales, etc.). Sin embargo, estoy tratando de comprender este comportamiento.

Afortunadamente hay alguien más sabio que yo que puede explicar esto.

Ejemplo en vivo here.

Fuente

2011-01-28 Eric J. Francois

¿Por qué estás mezclando el estilo exterior y en línea? – Kyle

Para ayudar a probar esto, he creado una [página JSFiddle] (http://jsfiddle.net/QfPKD/) usando el código original (ligeramente modificado para usar menos estilos en línea, pero con el mismo efecto). – Spudley

Hice lo mismo: D Excepto que no modificó los estilos en línea. – Kyle

El valor predeterminado para vertical-align en CSS es baseline. Esto significa que la línea de base del último texto en la primera sección ("1B") se alinea con la línea de base del último texto en la segunda sección ("5"), y también con la línea de base de cualquier texto circundante si usted tuvo alguna.

Si agrega un vertical-align: bottom; explícito a su CSS .section, entonces usará la parte inferior del bloque en línea como la guía de alineación, dando el resultado que desee.

Ver http://www.brunildo.org/test/inline-block.html para una demostración de cómo se aplica a vertical-align inline bloques

Fuente

2011-01-28 12:20:13 Gareth

De hecho. Estaba totalmente ajeno a los trabajos básicos de alineación vertical. No debería haber estado leyendo la documentación de la propiedad de visualización, sino de la propiedad de alineación vertical. ¡Muchas gracias! –

Espero que esto sea obvio para cualquiera que lea esto, pero vertical-align: top; también funciona bien si tiene el problema opuesto donde las columnas subsecuentes son "presionadas" –

CSS: posición vertical inesperada de elementos "inline-block"

Respuesta

Cuestiones relacionadas