Warum sind meine Inline-Blockelemente vertikal falsch ausgerichtet?

Enthüllung des Geheimnisses der vertikalen Fehlausrichtung in Inline-Block-Elementen

Ein rätselhaftes CSS-Problem, bei dem der Inhalt eines Inline-Block-Elements vertikal falsch ausgerichtet erscheint ? Der Übeltäter könnte der Standardwert für die vertikale Ausrichtung sein.

Inline-Block-Elemente haben eine standardmäßige vertikale Ausrichtung der Grundlinie, die die Grundlinie der Box an der des übergeordneten Elements ausrichtet. Dies kann zu einer unerwarteten Ausrichtung führen, wenn das Element keine Einlaufzeilenboxen enthält oder einen anderen als den sichtbaren Überlaufwert hat.

Beachten Sie das folgende HTML und CSS:

<div>
<pre class="brush:php;toolbar:false">#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

In diesem Beispiel erscheint das Element „.divAccountData“ im Vergleich zu „.divAccountPicker“ nach unten verschoben. Durch das Hinzufügen von Text zu „.divPutTextToFixIssue“ werden die Elemente auf magische Weise vertikal ausgerichtet.

Dieses Verhalten ergibt sich aus der Tatsache, dass die Grundlinie eines Inline-Block-Elements durch die Grundlinie seines letzten Zeilenfelds bestimmt wird. Durch das Hinzufügen von Text zu „.divPutTextToFixIssue“ haben wir effektiv die Grundlinie geändert und die Ausrichtung oben erzwungen.

Wenn jedoch beide Blöcke eine unterschiedliche Anzahl von Zeilen enthalten, wird die Ausrichtung erneut unterbrochen. Um eine konsistente vertikale Ausrichtung sicherzustellen, erzwingen Sie die Ausrichtung mit der Eigenschaft „vertikal-align“:

.divAccountData {
  vertical-align: top;
}

Dadurch wird die Grundlinie von „.divAccountData“ am Anfang von „.divAccountPicker“ ausgerichtet, unabhängig von der Zeilenanzahl.