¿Por qué este elemento de bloque en línea tiene contenido que no está alineado verticalmente?
Me encontré con un extraño problema de CSS. ¿Alguien puede explicar por qué el cuadro que tiene contenido no está alineado verticalmente?
Si coloca texto dentro del intervalo con clase .divPutTextToFixIssue, se alinea correctamente.
http://jsfiddle.net/KgqJS/88/
#divBottomHeader {
background-color: #d5dbe0;
height: 43px;
}
.divAccountPicker {
display: inline-block;
background: blue;
width: 200px;
height: 40px;
}
.divAccountData {
display: inline-block;
background: red;
width: 400px;
height: 40px;
}<div id="divBottomHeader">
<div class="divAccountPicker">
<span class="divPutTextToFixIssue"></span>
</div>
<div class="divAccountData">
<span>Balance: $555</span>
</div>
</div>
El valor predeterminado vertical-alignes baselinecuál
Alinea la línea base del cuadro con la línea base del cuadro principal.
Nota: Puede ver este valor predeterminado en acción agregándolo vertical-align:baselinea su .divAccountDataselector. Dado que baselinela alineación es predeterminada, no se modifica.
Debes cambiarlo para topalinear los bloques en la parte superior, por ejemplo:
.divAccountData {
display: inline-block;
background: red;
width: 400px;
height: 40px;
vertical-align: top;
}
La línea de base se define como
la línea sobre la que se "asientan" la mayoría de las letras y debajo de la cual se extienden las líneas descendentes
Para abordar por qué agregar texto parece solucionar el problema es porque
La línea base de un 'bloque en línea' es la línea base de su último cuadro de línea en el flujo normal, a menos que no tenga cuadros de línea en el flujo o si su propiedad 'desbordamiento' tiene un valor calculado distinto de 'visible', en en cuyo caso la línea de base es el borde del margen inferior.
de los detalles del modelo de formato visual CSS2
Entonces, agregar un solo carácter cambia la línea base, lo que hace que el segundo bloque aparezca en la misma alineación vertical. Esto solo funciona si ambos bloques contienen la misma cantidad de líneas. Prueba a añadir más palabras a uno de tus bloques y verás que sin forzar vertical-align:topel segundo bloque se moverá dependiendo de cuántas líneas de texto existan en el primer bloque.
Editar: encontré una pregunta relacionada ¿Por qué este elemento de bloque en línea se empuja hacia abajo?
Necesitas agregar vertical-align: top;a .divAccountPicker la demostración
