2516

marginCSS を記述するとき、いつ使用するか、いつ使用するかを決定する際に使用すべき特定のルールまたはガイドラインはありますpaddingか?

4

16 に答える 16

1739

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

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

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

したがって、最初の要素のコンテンツ、最初の要素のパディング、2 番目のパディング、2 番目の要素のコンテンツが続きます。

2emしたがって、2 つの要素の内容は離れてしまいます。

そのパディングを 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>

于 2012-02-07T20:59:55.510 に答える
1553

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

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

ここに画像の説明を入力

于 2010-02-03T03:22:58.763 に答える
609

例、図、さらには「自分で試してみる」ビューでこれを説明しているのを見た中で最高のものはこちらです。

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

ここに画像の説明を入力

覚えておくべきことの 1 つは、標準に準拠したブラウザー ( IE quirks は例外です) は、指定された幅のコンテンツ部分のみをレンダリングするため、レイアウトの計算でこれを追跡することです。また、Bootstrap 3のサポートにより、border box が多少復活していることにも注意してください。

于 2011-05-04T19:21:06.480 に答える
120

あなたの質問にはもっと技術的な説明がありますが、マージンとパディングについて考える方法が必要な場合は、このアナロジーが役立つかもしれません。

ブロック要素が壁に掛けられた額縁であると想像してください:

  • 写真は中身です。
  • マットはパディングです。
  • フレームモールはボーダーです。
  • 壁はビューポートです。
  • 2 つのフレームの間のスペースはマージンです。

これを念頭に置いて、要素を壁の他の要素との関係で間隔をあけたい場合はマージンを使用し、要素自体の外観を調整する場合はパディングを使用することをお勧めします。マージンは要素のサイズを変更しませんが、パディングは要素を大きくします1。

1 この動作はbox-sizing属性で変更できます。

于 2013-12-17T01:10:12.523 に答える
35

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

$(".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>

于 2010-02-09T05:29:50.577 に答える
34

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

何かを与えるときのよう{padding: 10px;}に、要素の幅を20px縮小して、「フィット」を維持し、周囲の他の要素を邪魔しないようにする必要があります。

したがって、私は通常、最初にパディングを使用してすべてを取得しpacked、マージンを使用してマイナーな調整を行います。

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

于 2010-02-03T05:35:27.627 に答える
18

注意すべきことの 1 つは、マージンの自動縮小が気になる場合 (そして、要素に背景色を使用していない場合)、パディングを使用する方が簡単なことです。

于 2010-02-03T03:28:00.580 に答える
18

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

padding要素内のコンテンツに間隔を空けるために使用するのは不適切です。代わりに子要素を使用する必要があります。Internet Explorer などの古いブラウザは、 Internet Explorer 4で完全に動作するものを使用する場合を除いて、ボックス モデルを誤解していました。marginmargin

padding using の使用が適切な場合は、次の 2 つの例外があります。

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

  2. あなたは、ベンダー *咳* Mozilla *咳* が修正を拒否し、(W3C および WHATWG エディターと定期的にやり取りしている程度に) 有効な解決策とこの解決策が必要であると確信している、非常に雑多なブラウザーのバグを補っています。あなたが補償しているバグ以外のスタイリングには影響しません。

幅が 100% の要素がある場合は、padding: 50px;効果的にwidth: calc(100% + 100px);. marginはに追加されないため、要素に直接ではなくonwidthを使用しても、予期しないレイアウトの問題が発生することはありません。marginchild elementspadding

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

于 2015-12-29T17:28:54.233 に答える