Heim > Web-Frontend > CSS-Tutorial > Warum läuft mein „Margin-Top'-Prozentsatz über den Container hinaus?

Warum läuft mein „Margin-Top'-Prozentsatz über den Container hinaus?

Barbara Streisand
Freigeben: 2024-11-04 09:13:30
Original
805 Leute haben es durchsucht

Why Does My `margin-top` Percentage Overflow the Container?

Berechnung des Prozentsatzes des oberen Randes: Den breitenbasierten Ansatz verstehen

In CSS werden vertikale Ränder, einschließlich des oberen Randes, basierend auf berechnet die Breite des enthaltenden Blocks. Dieser Ansatz gewährleistet horizontale und vertikale Konsistenz bei Randmessungen und vermeidet zirkuläre Abhängigkeiten beim Layouten von Inhalten.

Horizontale und vertikale Konsistenz:

Mit der Kurzform-Margin-Eigenschaft können Sie festlegen Ränder für alle vier Seiten. Wenn vertikale Ränder auf der Höhe statt auf der Breite basieren würden, hätten die Ränder auf verschiedenen Seiten oft unterschiedliche Größen, was das konsistente Verhalten beeinträchtigen würde.

Vermeidung zirkulärer Abhängigkeiten:

CSS-Lays Inhalte in vertikalen Blöcken ausgeben. Die Breite eines Blocks wird normalerweise durch die Breite seines übergeordneten Blocks bestimmt. Die Höhe eines Blocks hängt jedoch von seinem Inhalt ab und kann sich dynamisch ändern. Wenn vertikale Ränder von der Höhe abhängen würden, gäbe es eine zirkuläre Abhängigkeit zwischen der Höhe des übergeordneten Elements und dem Rand des untergeordneten Elements.

Beispiel:

Betrachten Sie den folgenden Code, in dem das untergeordnete Element enthalten ist hat einen Rand oben: 50 %:

<div class="container">
  <p>Some Cool Content</p> 
 
</div>
Nach dem Login kopieren
.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}
Nach dem Login kopieren

Entgegen der Erwartung, dass das untergeordnete Element 50 % unter der Oberkante des Containers (100 Pixel) liegen würde, überschreitet es die Höhe des Containers. Dies liegt daran, dass der prozentuale Spielraum auf der Breite des Containers und nicht auf seiner Höhe basiert. In diesem Beispiel beträgt die Breite des Containers 500 Pixel, was zu einem oberen Rand von 250 Pixel führt.

Zusammenfassend lässt sich sagen, dass die Berechnung des vertikalen Rands auf der Breite des enthaltenden Blocks basiert, um Konsistenz sicherzustellen, zirkuläre Abhängigkeiten zu vermeiden und ein effizientes Layout zu ermöglichen Bau.

Das obige ist der detaillierte Inhalt vonWarum läuft mein „Margin-Top'-Prozentsatz über den Container hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage