Wie verwende ich prozentualen Abstand oder Rand basierend auf der Höhe des übergeordneten Containers in CSS?

So legen Sie den Abstand oder den Rand als Prozentsatz der Höhe des übergeordneten Containers fest

Der Versuch, ein Element mithilfe von CSS vertikal auszurichten, mag logisch erscheinen um die Eigenschaft „padding-top“ oder „margin-top“ als Prozentsatz der Höhe des übergeordneten Containers festzulegen. Die Verwendung von Prozentsätzen mit padding-top und margin-top führt jedoch zu Werten im Verhältnis zur Breite des Containers, was zu unerwartetem Verhalten führt, wenn sich die Breite des Containers ändert.

Die Lösung

Um die Polsterung oder den Rand als Prozentsatz der Höhe des übergeordneten Containers festzulegen, vermeiden Sie die Verwendung von padding-top und margin-top. Legen Sie stattdessen die obere oder untere Eigenschaft des Elements innerhalb des übergeordneten Containers fest.

`

<div>

<div>

`

Erläuterung

Durch die Verwendung der top-Eigenschaft ist die Position des untergeordneten Elements jetzt relativ zum Höhe des übergeordneten Containers, um sicherzustellen, dass die vertikale Ausrichtung unabhängig von der Breite des Containers konsistent bleibt.

Das obige ist der detaillierte Inhalt vonWie verwende ich prozentualen Abstand oder Rand basierend auf der Höhe des übergeordneten Containers in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!