なぜ、ほとんどのフレームワークはマージンを使用し、p、h1、h2などにパディングしないのですか？

Question

パディングを使用することには欠点がありますか？なぜ誰もがマージンを持つように見えるのだろうか？

Answer 1

paddingとmarginは2つの異なるものであり、異なる効果を達成するために使用されています。 backgroundがなければ、これらのルールは視覚的に同じことをするように見えるかもしれませんが、それぞれ異なる場所にスペースが追加されます。

パディング

Padding要素内に間隔を追加する - 要素の境界とコンテンツの間。 elementのcontentは、要素の端（またはそのborder）のすぐ隣にはありません。

マージン

Marginは、要素自体の外側に間隔を加算します。それは、要素と周囲の要素との間にどれくらいのスペースがあるべきかを指定します。

その他の違い：

• Margin-topとmargin-bottom常に崩壊する、すなわち、 margin-top:15pxとmaragin-bottom:10pxの2つの要素は、お互いから15pxの距離を持ちます。 paddingルールは、他の要素のpaddingが何であり、決して崩壊しないか気にしません。

• Marginsも負の値を使用してと重複要素を製造するために使用することができます。負のpaddingは無効で、何もしません。

• Marginは、常にで、透過度はであり、backgroundを持つことはできません。ただし、はpaddingにペイントされます（ただし、要素の内容内にのみ背景を塗りつぶすbackground-origin: content-boxルールを使用しない限り）。

• Marginはmargin-leftとmargin-right両方に値autoを使用して要素をセンタリングするために使用することができます。 Paddingはautoにはなりません。

  

実行以下のスニペットは、作用の違いを参照する。

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

から実施例への追​​加は、上記の一つの違い複数存在します。マージンは、場合によっては崩壊する可能性があり、パディングはしません。したがって、同じ種類の2つの要素間の合計スペースが異なる可能性があるため、背景色がなくても見た目が異なることがあります。

example