web-dev-qa-db-ja.com

CSSでマージンとパディングを使用する場合

CSSを書くとき、いつmarginを使うべきか、そしていつpaddingを使うべきかを決める際に使うべき特別な規則やガイドラインはありますか？

csspaddingmargin
2157
Alex Angas

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

私には、パディングとマージンの最大の違いは、垂直方向のマージンは自動的に折りたたまれ、パディングは行われないことです。

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

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

したがって、2つの要素の内容は2em離れていることになります。

その余白を1emのマージンで置き換えます。余白は要素の外側にあると見なされ、隣接する項目の余白は重なります。

したがって、この例では、最初の要素の内容とそれに続く結合マージンの1em、それに続く2番目の要素の内容になります。そのため、2つの要素の内容は1emだけ離れています。

これは、どの要素が次の要素であるかにかかわらず、要素の周囲のスペースの1emを言いたいということを知っているときには本当に便利です。

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

1407
pavon

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

  • 余白を使って、ブロックをその外側のものから分離します。
  • 内容をブロックの端から移動するには、パディングを使用します。

enter image description here

1419
John Boker

例、図、そして '自分で試してみる'ビューでこれを説明したのが私が一番見たのは ここ です。

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

enter image description here

念頭に置いておくべき1つのことは、規格準拠のブラウザ（ IEは例外です ）はコンテンツ部分だけを指定された幅にレンダリングするので、レイアウト計算でこれを追跡します。ボーダーボックスがそれをサポートしている Bootstrap 3で復活 のように見えることにも注意してください。

554
Scott

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

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

  • ブラウザウィンドウ は壁のようなものです。
  • content は写真のようなものです。
  • margin は、フレーム付きピクチャ間の壁のようなものです。
  • パディング は、写真を囲むマットのようなものです。
  • border は、フレーム上の境界線とまったく同じです。

マージンとパディングを決定するとき、壁の他のものとの関係で要素の間隔を空けるときは マージン を使うのがいい経験則です。あなたがいるときは パディング を使います。要素自体の外観を調整します。マージンは要素のサイズを変更しませんが、パディングは通常要素を大きくします1。

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

84
stvnrynlds

_マージン_ vs _パディング_ ：

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

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

Margin Vs Padding - CSSのプロパティ から抽出した画像を参照してください。

Margin vs Padding

82
Touhid Rahman

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>
31
Frank Schwieterman

マージンについての事はあなたが要素の幅について心配する必要がないということです。

あなたが何かを{padding: 10px;}で与えるときのように、 ' fit 'を維持し、周りの他の要素を邪魔しないためには、要素の幅を 20px だけ減らす必要があります。

それで私は一般的にすべての 'packed'を得るためにパディングを使うことから始めて、そして次に微調整のためにマージンを使います。

注意が必要なもう1つのことは、パディングは異なるブラウザでより一貫しており、IEは負のマージンをうまく処理しないことです。

31
pixeltocode

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

enter image description here

それはあなたの要素がその外側の余白について知らないことを意味するので、もしあなたが動的なWebコントロールを開発しているなら、私はあなたができるならば余白対余白を使うことを勧めます。

場合によってはマージンを使用する必要があります。

27
Mohammad Golahi

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

各部の説明：

  • 内容 - テキストと画像が表示されるボックスの内容

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

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

  • 余白 - 境界の外側の領域をクリアします。余白は透明です

Illustration of CSS box model

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

25
Pulkit Anchalia

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

18
alex

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

paddingを使用して要素内のコンテンツにスペースを入れることは不適切です。 you must代わりにchild elementでmarginを利用します。 Internet Explorerなどの古いブラウザは、Internet Explorer 4で完全に機能するmarginを使用する場合を除き、ボックスモデルを誤って解釈していました。

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

  1. 入力要素などの子要素を含むcannotのインライン要素に適用されます。

  2. ベンダー*咳* Mozilla *咳*が修正を拒否し、（W3CおよびWHATWGエディターとの定期的な交換を行う程度に）あなたがmustであるという非常に雑多なブラウザーバグを補います。実用的なソリューションがあり、このソリューションはあなたが補っているバグ以外のスタイリングには影響しません。

padding: 50px;で100％幅の要素を使用すると、width: calc(100% + 100px);を効率的に取得できます。 marginはnotにwidthに追加されるため、marginの代わりにchild elementsで直接paddingを使用しても、予期しないレイアウトの問題は発生しません。

notの場合は、これら2つのことのいずれかを行いますnot要素にパディングを追加しますが、直接の子/子要素には追加しますallectedブラウザーでexpected動作を取得します。

15
John

marginとpaddingの違いを知っておくと便利です。いくつか違いがあります。

  • 余白は要素の 外側のスペース で、余白は 要素の/ - 内部スペース です。

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

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

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

  • 要素をスタイルすると、余白には影響しませんが、パディングは影響を受けます（背景色など）。

14
MAChitgarha

最初に違いとそれぞれの責任が何であるかを見てみましょう。

1）マージン

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


2）パディング

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

そのため、単純に Margins は要素の周囲のスペース、 Padding は要素の一部であるコンテンツの周囲のスペースです。

Margin and Padding

codemancers からのこの画像は、マージンとボーダーがどのように一体になっているか、そしてボーダーボックスとコンテントボックスがどう違うかを示しています。

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

  • コンテンツ - これは、テキスト、画像、あるいはその他の要素などの実際のコンテンツが存在するボックスのコンテンツ領域を定義します。
  • パディング - これはそれを含むボックスからメインコンテンツをクリアします。
  • ボーダー - これはコンテンツとパディングの両方を囲みます。
  • 余白 - この領域は、他の要素と分離する透明なスペースを定義します。
14
Alireza

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

box model image

これはFirefoxの検査要素機能のボックスモデルです。玉ねぎのように働きます。

  • あなたのコンテンツは途中です。
  • パディングは、あなたのコンテンツとそれが入っているタグの端との間のスペースです。
  • 国境とその仕様
  • 余白はタグの周囲のスペースです。

マージンが大きいほど、コンテンツを含むボックスの周囲のスペースが広くなります。

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

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

7
Bjamse

Margin

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

たとえば、ナビゲーションバーを作成して画面の端に貼り付けてホワイトギャップがないようにするときに使用します。

パディング

私は通常<div>のようなボーダーの内側にある要素を使っていて、そのサイズを小さくしたいのですが、その時は周囲の他の要素間の距離や余白を保ちたいと思います。

とても簡単に言うと、状況によって異なります。それはあなたがやろうとしていることによります。

6
Mostafa Osama

余白は箱の外側にあり、余白は箱の内側にあります

0
saurabhgoyal795