Warum hat mein übergeordnetes Element eine vertikale Bildlaufleiste, auch wenn es und sein untergeordnetes Element die gleiche Höhe haben?

Adressierung der vertikalen Bildlaufleiste, obwohl untergeordnetes und übergeordnetes Element die gleiche Höhe haben

In HTML, wenn CSS verwendet wird, um verschachtelte Elemente dort zu formatieren, wo das übergeordnete und untergeordnete Element vorhanden sind Bei gleicher Höhe ist es möglich, dass im übergeordneten Element eine vertikale Bildlaufleiste angezeigt wird. Dies kann verwirrend sein, da es den Anschein hat, dass die Bildlaufleiste nicht notwendig sein sollte.

Die Ursache: Vertikale Ausrichtung der Grundlinie

Die Ursache dieses Problems liegt in der Standardeinstellung CSS-Eigenschaft für Elemente auf Inline-Ebene, einschließlich Inline-Blöcken (z. B. Divs mit display: inline-block): Vertical-Align: Baseline. In der Typografie erstrecken sich Zeichen wie „j“ und „g“ über die Grundlinie hinaus. Dieser Grundlinienabstand schafft zusätzliche Höhe innerhalb des übergeordneten Elements.

Beheben des Problems

Um die unerwartete vertikale Bildlaufleiste zu entfernen, können Sie die vertikale Ausrichtung der untergeordneten Elemente mit anpassen Vertical-Align-Eigenschaft. Wenn Sie es auf „Oben“, „Unten“ oder „Mitte“ anstelle der Standardgrundlinie festlegen, wird der zusätzliche Abstand beseitigt und verhindert, dass die Bildlaufleiste angezeigt wird:

.sideBar, .contentHolder {
  vertical-align: top; // or 'bottom', 'middle'
}

Alternativen

Neben der Anpassung der vertikalen Ausrichtung gibt es noch weitere Möglichkeiten, dieses Problem zu lösen:

• Verwenden Sie display: block statt display: Inline-Block für die untergeordneten Elemente.
• Zeilenhöhe: 0 für das übergeordnete Element festlegen.
• Schriftgröße: 0 für das übergeordnete Element festlegen (Sie können es bei untergeordneten Elementen überschreiben, wenn benötigt).

Das obige ist der detaillierte Inhalt vonWarum hat mein übergeordnetes Element eine vertikale Bildlaufleiste, auch wenn es und sein untergeordnetes Element die gleiche Höhe haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!