Warum sind Inline-Blockelemente mit Inhalt vertikal falsch ausgerichtet?

Vertikale Ausrichtung des Inline-Block-Elements mit Inhalt

Frage:

Warum enthält ein Inline-Block-Element Inhalt? scheinen falsch ausgerichtet zu sein vertikal?

Erklärung:

Standardmäßig werden Inline-Block-Elemente mithilfe der Grundlinienregel vertikal ausgerichtet. Das bedeutet, dass die Grundlinie des Elements (die Linie, auf der die meisten Buchstaben ruhen) an der Grundlinie seines übergeordneten Containers ausgerichtet ist.

Wenn jedoch eines dieser Elemente keinen Inhalt enthält, wie im bereitgestellten CSS, Der Browser richtet das Element standardmäßig am unteren Rand aus. Diese Diskrepanz kann zu einer wahrgenommenen vertikalen Fehlausrichtung führen.

Lösung:

Um eine korrekte vertikale Ausrichtung sicherzustellen, setzen Sie die Eigenschaft „vertikal ausrichten“ auf „oben“. Dadurch wird das Element oben an seinem übergeordneten Element ausgerichtet, anstatt die Standardgrundlinienregel zu verwenden.

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

Hinweis:

Wenn beide Inline-Block-Elemente das enthalten Wenn Sie die gleiche Anzahl an Textzeilen haben, scheint das Hinzufügen von Text zum zweiten Element das Ausrichtungsproblem zu beheben. Dies liegt jedoch nur daran, dass dadurch das zweite Element gezwungen wird, eine Grundlinie festzulegen. Wenn sich die Anzahl der Zeilen ändert, wird die Ausrichtung ohne Anwendung der Vertical-Align-Eigenschaft wieder inkonsistent.

Das obige ist der detaillierte Inhalt vonWarum sind Inline-Blockelemente mit Inhalt vertikal falsch ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!