Warum verwenden die meisten Frameworks margin und nicht padding auf p, h1, h2 etc.?

Question

Wäre es ein Nachteil, Polsterung zu verwenden? Oder warum scheinen alle mit Marge zu gehen?

Answer 1

Es gibt auch keinen Nachteil, weil padding und margin zwei verschiedene Dinge sind und sie verwendet werden, um verschiedene Effekte zu erzielen. Ohne eine background scheinen diese Regeln visuell dasselbe zu tun, aber jeder fügt Abstand an verschiedenen Stellen hinzu.

Padding

Padding fügt Abstand innerhalb des Elements - zwischen dem Rand des Elementes und dessen Inhalt. Es ist so verwendet, dass die contentelement nicht direkt neben der Kante des Elements (oder seine border) wäre.

Margin

Margin fügt Abstand außerhalb des Elements selbst. Es gibt an, wie viel Platz zwischen dem Element und den umgebenden Elementen sein sollte.

Weitere Unterschiede:

• Margin-top und margin-bottom immer kollabieren, I.E. Zwei Elemente mit margin-top:15px und maragin-bottom:10px haben einen Abstand von voneinander. Die padding Regel ist egal, was die padding anderer Elemente ist und nie zusammenbrechen wird.

• Margins können Elemente auch verwendet werden, um überlappen negative Werte durch Verwendung. Negative padding ist nicht gültig und wird nichts tun.

• Margin ist immer transparent und kann keine background haben. Die background ist jedoch auf die padding gemalt (es sei denn, Sie verwenden die background-origin: content-box Regel, die den Hintergrund nur innerhalb des Elements Inhalt zeichnet).

• Margin können verwendet werden, um Elemente zu zentrieren, den Wert unter Verwendung von auto sowohl margin-left und margin-right. Padding kann nicht auto sein.

Führen Sie das folgende Snippet den Unterschied in Aktion zu sehen:

div{ 
 
    background: #B4D455; 
 
    width: 100px; 
 
} 
 
div:nth-of-type(2n){ 
 
    background: #D4B055; 
 
} 
 

 
.padding{ 
 
    padding: 10px; 
 
} 
 

 
.margin{ 
 
    margin: 10px; 
 
}

<h3>None</h3> 
 
<div>content</div> 
 
<div>content</div> 
 
<div>content</div> 
 

 
<h3>padding:10px;</h3> 
 
<div class="padding">content</div> 
 
<div class="padding">content</div> 
 
<div class="padding">content</div> 
 

 
<h3>margin:10px;</h3> 
 
<div class="margin">content</div> 
 
<div class="margin">content</div> 
 
<div class="margin">content</div> 
 

 
<h3>margin:10px; and padding:10px;</h3> 
 
<div class="padding margin">content</div> 
 
<div class="padding margin">content</div> 
 
<div class="padding margin">content</div>

Answer 2

von oben auf das Beispiel Hinzufügen gibt es einen Unterschied mehr. Der Rand kann in einigen Fällen kollabieren und das Padding nicht. So kann es auch ohne Hintergrundfarben anders aussehen, da der gesamte Abstand zwischen zwei gleichartigen Elementen unterschiedlich sein kann.

example