Warum erzeugen Inline-Block-Elemente trotz übereinstimmender Höhen vertikale Bildlaufleisten?

Warum erscheint eine vertikale Bildlaufleiste, wenn Eltern und Kind die gleiche Größe haben?

Problem:

Bei der Verwendung Inline-Block-Elemente (.sideBar und .contentHolder) innerhalb eines übergeordneten Containers (.displayContainer) wird eine unnötige vertikale Bildlaufleiste angezeigt, obwohl sowohl das übergeordnete als auch das untergeordnete Element über eine vertikale Bildlaufleiste verfügt die gleiche berechnete Höhe.

Ursache:

Die Standardeigenschaft für die vertikale Ausrichtung für Inline-Block-Elemente ist „baseline“, die Platz für Unterlängen (Kleinbuchstaben) reserviert unter die Grundlinie hinausragen). Dieser zusätzliche Platz führt dazu, dass der Container überläuft und die Bildlaufleiste angezeigt wird.

Lösung:

Um die vertikale Bildlaufleiste zu entfernen, passen Sie die Eigenschaft „Vertical-Align“ an an den untergeordneten Elementen oder nehmen Sie eine der folgenden Änderungen vor:

• Setzen Sie die vertikale Ausrichtung auf einen anderen Wert Wert:

  • vertikale Ausrichtung: oben
  • vertikale Ausrichtung: unten
  • vertikale Ausrichtung: Mitte

• Zur Anzeige wechseln: block:

  • .sideBar { display: block; }
  • .contentHolder { display: block; }

• Zeilenhöhe: 0 für das übergeordnete Element festlegen:

  • .displayContainer { line-height: 0; }

• Schriftgröße: 0 für das übergeordnete Element festlegen und bei untergeordneten Elementen wiederherstellen (falls erforderlich):

  • .displayContainer { Schriftgröße: 0; }
  • .sideBar { Schriftgröße: 16px; }
  • .contentHolder { Schriftgröße: 16px; }

Das obige ist der detaillierte Inhalt vonWarum erzeugen Inline-Block-Elemente trotz übereinstimmender Höhen vertikale Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!