In CSS, Rand- und Polstersteuerungsabstand extern bzw. intern. 1. Rand legt Platz au?erhalb eines Elements und beeinflusst den Abstand zwischen Elementen, ohne seine Gr??e zu ver?ndern. 2. Polster legt Platz in ein Element, erh?ht seine Gr??e und drückt den Inhalt von den Kanten weg. 3. R?nder k?nnen vertikal zusammenbrechen und negativ sein, w?hrend die Polsterung nicht. 4. Verwenden Sie den Rand für den Abstand zwischen Elementen und Polsterung für den internen Abstand innerhalb eines Elements.

Wenn Sie versuchen, den Abstand in CSS zu kontrollieren, sind zwei Eigenschaften, auf die Sie sofort sto?en, margin und padding . Sie sehen vielleicht ?hnlich aus, wenn Sie zum ersten Mal lernen, aber sie dienen sehr unterschiedlichen Zwecken. Kurz gesagt: Der Rand liegt au?erhalb des Tellers, die Polsterung ist im Inneren .

Welchen Rand in CSS macht

Margin steuert den Raum au?erhalb eines Elements - den Bereich zwischen diesem Element und anderen Elementen auf der Seite. Es wirkt sich nicht auf die eigene Gr??e des Elements aus, wie viel Atemraum es von seinen Nachbarn hat.

• Wenn Sie einen weiteren Div von diesem wegschieben m?chten, verwenden Sie margin .
• R?nder k?nnen vertikal zusammenbrechen (dies bedeutet, dass zwei vertikale R?nder nebeneinander zu einem verschmelzen k?nnen), was manchmal Anf?nger überrascht.
• Sie k?nnen alle vier Seiten ( margin-top , margin-right usw.) oder eine Kurzschrift wie margin: 10px 20px; .

Zum Beispiel:

 .Kasten {
  Rand: 20px;
}

Dies fügt 20px Platz um die gesamte Box hinzu und drückt andere Inhalte weg.

Welche Polsterung in CSS macht

Padding ist der Raum im Element - zwischen dem Inhalt und dem Rand. Wenn Sie die Polsterung hinzufügen, machen Sie das Element selbst effektiv gr??er (vorausgesetzt, box-sizing wird auf content-box gesetzt, was Standard ist).

• Polsterung beeinflusst die Hintergrundfarbe und die Grenzen. Wenn Ihre Box einen Hintergrund hat, erstreckt sich dieser Hintergrund in den Polsterbereich.
• Polsterung drückt andere Elemente nicht direkt weg, sondern schiebt den Inhalt von den Kanten weg.

Hier ist ein einfacher Fall:

 .Text-Box {
  Polsterung: 15px;
}

Jetzt hat jeder Text in .text-box 15px Platz von der Kante.

Den Unterschied visualisieren

Denken Sie an einen Bilderrahmen:

• Der Rand ist wie der leere Wandraum um den Rahmen - wie weit er aus anderen Rahmen liegt.
• Die Polsterung ist die Mattierung im Rahmen - der Raum zwischen dem Foto und dem Glas/Rahmen.

Wenn Sie also die Polsterung erh?hen, bewegt sich das Foto (Ihr Inhalt) nach innen. Wenn Sie den Rand erh?hen, bewegt sich der gesamte Rahmen von nahe gelegenen Objekten weg.

Wann verwenden Sie Margin und Polsterung

Manchmal ist die Wahl nicht offensichtlich. Hier sind ein paar praktische Tipps:

• Verwenden Sie den Rand , wenn Sie Platz zwischen den Elementen wünschen.
• Verwenden Sie die Polsterung , wenn Sie den internen Abstand wünschen, ohne den Layoutfluss zu stark zu ?ndern.
• Willst du etwas zentrieren? Versuchen Sie margin: 0 auto; .
• Ben?tigen Sie mehr Platz in einer Schaltfl?che, damit der Text die Kanten nicht berührt? Das ist Polsterung.

Denken Sie auch an:

• Hintergründe und Grenzen sind Polsterung.
• R?nder k?nnen negativ sein, wodurch Sie Elemente n?her zusammenziehen k?nnen.
• Polsterung kann nicht negativ sein.

Stellen Sie sich den Rand im Grunde genommen als externen Abstand und Polsterung als intern vor. Sobald Sie sich an diese Unterscheidung gew?hnt haben, wird die Positionierung und Abstandselemente viel einfacher.

Das obige ist der detaillierte Inhalt vonUnterschied zwischen Marge und Polsterung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!