Warum weisen Bilder einen unerwarteten unteren Rand auf, selbst wenn keine Ränder und kein Rand vorhanden sind?

Geheimnisvolle Abstände unter Bildern verstehen

Warum haben Bilder oft einen unerklärlichen leeren Raum unter ihnen, selbst wenn Abstände und Ränder auf eingestellt sind? Null?

Erklärung

Bilder werden als Inline-Block-Elemente behandelt, ähnlich wie Zeichen im Text. Sie halten sich an die Regel der Grundlinie, einer Linie, die über den unteren Rand der meisten Buchstaben verläuft. Bestimmte Buchstaben wie „p“ und „q“ haben jedoch Unterlängen, die unter die Grundlinie hinausragen. Um zu verhindern, dass diese Unterlängen mit nachfolgenden Zeilen kollidieren, wird unterhalb der Grundlinie Platz reserviert.

Bilder werden an dieser Grundlinie ausgerichtet, sodass am unteren Rand zusätzlicher Platz entsteht, selbst wenn kein Text vorhanden ist.

Lösung

Um dieses Problem zu beheben, wenden Sie die CSS-Eigenschaft Vertical-Align: Bottom auf das Bild an. Dadurch wird das Bild am unteren Rand der Zeile ausgerichtet und der mysteriöse Abstand beseitigt.

Achtung

Mit dieser Lösung wird zwar das Abstandsproblem behoben, es kann jedoch ein weiteres Problem entstehen, wenn das Problem auftritt Das Bild ist kleiner als die Zeilenhöhe. In solchen Fällen kann über dem Bild zusätzlicher Platz erscheinen. Um dies zu beheben, fügen Sie line-height: 1px zum Containerelement hinzu.

Das obige ist der detaillierte Inhalt vonWarum weisen Bilder einen unerwarteten unteren Rand auf, selbst wenn keine Ränder und kein Rand vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!