CSSでマージンvsパディングを使用する場合[終了]

CSSを作成するときにmargin、いつ使用するpaddingか、いつ使用するかを決定する際に使用する必要がある特定のルールまたはガイドラインはありますか？

TL; DR： 境界線または背景があり、表示されているボックス内のスペースを増やしたい場合を除いて、デフォルトではどこでもマージンを使用します。

私にとって、パディングとマージンの最大の違いは、垂直マージンは自動的に折りたたまれるということですが、パディングはそうではありません。

2つの要素を上下にパディングして考えます1em。このパディングは要素の一部と見なされ、常に保持されます。

したがって、最初の要素のコンテンツ、最後の最初の要素のパディング、2番目の要素のパディング、2番目の要素のコンテンツの順になります。

したがって、2つの要素のコンテンツは最終的に2em離れてしまいます。

次に、そのパディングを1emマージンに置き換えます。余白は要素の外側にあると見なされ、隣接するアイテムの余白は重なります。

したがって、この例では、最初の要素のコンテンツに続いて1em、結合されたマージンの後に2番目の要素のコンテンツが続きます。したがって、2つの要素の内容は1em離れています。

これは1em、要素の隣にある要素に関係なく、要素の周囲の間隔について言いたいことがわかっている場合に非常に役立ちます。

他の2つの大きな違いは、パディングがクリック領域と背景色/画像に含まれているが、マージンは含まれていないことです。

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

余白はブロック要素の外側にあり、パディングは内側にあります。

• マージンを使用して、ブロックをその外側のものから分離します
• パディングを使用して、コンテンツをブロックの端から離します。

これを例、図、さらには「自分で試す」ビューで説明した中で、私が見た中で最高のものはここにあります。

下の図は、違いを即座に視覚的に理解できると思います。

注意すべきことの1つは、標準に準拠したブラウザー（IEの癖は例外です）は、コンテンツ部分のみを指定された幅にレンダリングするため、レイアウトの計算でこれを追跡することです。また、Bootstrap 3がボーダーボックスをサポートするようになり、ボーダーボックスが復活したようです。

あなたの質問にはもっと技術的な説明がありますが、あなたがする方法を探しているなら ますが、いつどのように使用するかを選択するのに役立つマージンとパディングについて考える、これが役立つかもしれません。

ブロック要素を壁に掛かっている写真と比較します。

• の ブラウザウィンドウがちょうど壁のようなものです。
• の コンテンツは、ちょうど写真のようです。
• の マージンはちょうどフレーム画像間の壁のスペースのようなものです。
• の パディングはちょうど写真の周りにマットのようなものです。
• ボーダーはフレームと同じです。

マージンとパディングのどちらを使用するかを決定するとき、壁の他の要素との関係で要素に間隔を空ける場合はマージンを使用し、要素自体の外観を調整する場合はパディングを使用するのが良い経験則です。マージンは要素のサイズを変更しませんが、パディングは通常、要素を大きくします ¹。

¹ このデフォルトのボックスモデルは、box-sizing属性で変更できます。

マージン対パディング：

1. 要素で余白を使用して、その要素とページの他の要素の間の距離を作成します。コンテンツと要素の境界線の間の距離を作成するためにパディングが使用される場所。

2. 余白は、パディングが要素の一部である要素の一部ではありません。

マージン対パディングから抽出した以下の画像を参照してください-CSSプロパティ

https://www.w3schools.com/css/css_boxmodel.aspから

さまざまな部分の説明：

• コンテンツ -テキストと画像が表示されるボックスのコンテンツ

• パディング -コンテンツの周囲の領域をクリアします。パディングは透明です

• ボーダー -パディングとコンテンツを囲むボーダー

• マージン -境界線の外側の領域をクリアします。マージンは透明です

実例（値を変更して遊んでください）：https : //www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

以下は、クリック可能性と背景の塗りつぶしにどのようpaddingにmargin影響を与えるかを示すHTMLです。オブジェクトはパディングへのクリックを受け取りますが、オブジェクトのマージンのある領域をクリックすると、その親に移動します。

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

マージンについてのことは、要素の幅を気にする必要がないことです。

何かを与えるときのように、 ' フィットを維持するために{padding: 10px;}要素の幅を20px減らす必要があります」周りの他の要素に。

だから私は一般的にすべてを取得するためにパディングを使用することから始めます 'packed、その後、小さな調整にマージンを使用します。

もう1つ注意すべき点は、パディングはブラウザーごとに一貫しており、IEは負のマージンをあまりうまく処理しないことです。

マージンは要素の周囲（境界線の外側）の領域をクリアしますが、パディングは要素のコンテンツ（境界線の内側）の周囲の領域をクリアします。

これは、要素がその外側のマージンを認識していないことを意味します。そのため、動的Webコントロールを開発している場合は、可能であればパディング対マージンを使用することをお勧めします。

時にはマージンを使わなければならないことに注意してください。

それは間の違いを知って良いことだmarginとしますpadding。ここにいくつかの違いがあります：

• マージンは要素の外側のスペースですが、パディングは要素の内側のスペースです。

• マージンは要素の境界線の外側のスペースですが、パディングは要素の境界線の内側のスペースです。

• Marginはauto：の値を受け入れmargin: autoますが、パディングをautoに設定することはできません。

• マージンは任意の数に設定できますが、パディングは負でない必要があります。

• 要素にスタイルを設定すると、パディングも影響を受けます（たとえば、背景色）が、マージンは影響を受けません。

注意すべきことの1つは、マージンの自動折りたたみが煩わしい場合（および要素に背景色を使用していない場合）、パディングを使用するほうが簡単なことです。

高度なマージンとパディングの説明

padding要素のコンテンツの間隔を空けるために使用することは不適切です。あなたがしなければならない利用margin上の子要素の代わりに。Internet Explorerなどの古いブラウザmarginは、Internet Explorer 4で完全に機能する場合を除いて、ボックスモデルを誤って解釈していました。

使用padding が適切である場合、2つの例外があります。

1. input要素などの子要素を含むことができないインライン要素に適用されます。

2. あなたがいることを（あなたがW3CとWHATWG編集者との定期的な交流を保持する程度に）ベンダー*咳*のMozilla *咳*は、修正することを拒否し、高度その他のブラウザのバグを補償し、特定のされている必要があります使用液と、このソリューションを持っています補正しているバグ以外のスタイリングには影響しません。

100％幅の要素があるpadding: 50px;場合、効果的に取得できwidth: calc(100% + 100px);ます。以来がmarginされていないに追加しwidth、使用するとき、それは予想外のレイアウトの問題は発生しませんmarginでchild elementsはなく、padding要素に直接。

したがって、これら2つのいずれかを実行していない場合は、要素にパディングを追加するのではなく、直接の子/子要素にパディングを追加して、すべてのブラウザーで期待される動作が確実に得られるようにします。

まず、違いは何であり、それぞれの責任は何かを見てみましょう：

1）マージン

CSSマージンプロパティは、要素の周囲にスペースを生成するために使用されます。
marginプロパティは、境界線の外側の空白のサイズを設定します。CSSを使用すると、マージンを完全に制御できます。
要素の両側（上、右、下、左）のマージンを設定するためのCSSプロパティがあります。

2）パディング

CSSパディングプロパティは、コンテンツの周囲にスペースを生成するために使用されます。
パディングは、要素のコンテンツ（ボーダー内）の周囲の領域をクリアします。
CSSを使用すると、パディングを完全に制御できます。要素の両側（上、右、下、左）のパディングを設定するためのCSSプロパティがあります。

したがって、単にマージンは要素の周りのスペースであり、パディングは要素の一部であるコンテンツの周りのスペースです。

コードマンサーからのこの画像は、マージンとボーダーがどのように組み合わされ、ボーダーボックスとコンテンツボックスがどのように異なるかを示しています。

また、各セクションを次のように定義します。

• コンテンツ -これは、テキスト、画像、その他の要素などの実際のコンテンツが存在するボックスのコンテンツ領域を定義します。
• パディング -これにより、メインのコンテンツが含まれているボックスから消去されます。
  
• 境界 -コンテンツとパディングの両方を囲みます。
• マージン -この領域は、他の要素から分離する透明なスペースを定義します。

私はいつもこの原則を使います：

これは、Firefoxの要素検査機能のボックスモデルです。タマネギのように機能します：

• あなたのコンテンツは真ん中です。
• パディングとは、コンテンツとその中のタグの端の間のスペースです。
• 国境とその仕様
• マージンはタグの周りのスペースです。

したがって、余白が大きくなると、コンテンツを含むボックスの周囲のスペースが広くなります。

パディングを大きくすると、コンテンツとその中のボックスとの間のスペースが大きくなります。

特定の値に設定されている場合、どちらもボックスのサイズを増減しません。

マージン

マージンは通常、要素自体とその周囲の間にスペースを作成するために使用されます。

たとえば、ナビゲーションバーを作成しているときに、画面の端にくっつき、白い隙間がないようにするために使用します。

パディング

私は通常、境界線の内側に要素がある場合に使用します。 <div>そのサイズを小さくしたいが、そのときは、周囲の他の要素間の距離またはマージンを維持したいときに使用します。

簡単に言えば、状況に応じたものです。それはあなたが何をしようとしているのかに依存します。

マージンはボックスの外側にあり、パディングはボックスの内側にあります