CSS、ネストされたdiv＆amp;マージンとパディング

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

質問

iはボックスモデルを完全に理解しています。この質問は、いつマージンを使用し、いつパディングを使用するかに関するセマンティック方法論を特定しようとすることに関するものです。

典型的な例はこちら

まず、わかりやすい英語で：

  • 状況：コンテナdivがあり、その中に段落要素があります。

  • 目標：divの内側と段落の外側の間に12pxのスペースを確保します。

  • オプションa）コンテナdivに12pxのパディングを適用

  • オプションb）段落要素に12pxのマージンを適用

または、必要に応じて、HTML：

<div id="container">
    <p>Hello World!</p>
</div>

そして、CSS：

オプションa）

div#container {padding: 12px;}

オプションb）

p {margin: 12px;}

乾杯！

ジョン

役に立ちましたか？

解決

個人的には、オプションAを好みます。なぜですか？ここで、他のHTML要素をdivに追加する必要があり、パディングを維持する必要がある場合、CSSファイルに他のルールを追加して機能させる必要はありません。

他のヒント

パディングとマージンは同じ効果をもたらしますが、次の場合を除きます（いくつか見逃すかもしれません）：

  1. 何らかの背景プロパティがあります。マージンはそれらを取得しません。
  2. 境界線があります
  3. TDを使用します（マージンなし）
  4. 2つのネストされたアイテム、余白は一緒に折りたたまれますが、余白はありません。
  5. （これをチェックする必要があります）おそらく要素の幅と高さに異なる影響を与えます。 （誰かがよく知っているなら、plsはこれを編集します）。

これはcssのバグです。 次に例を示します。

http://creexe.zxq.net/div-issue-padding.html =パディングの問題

http://creexe.zxq.net/div-issue-margin.html =マージンの問題

例の赤と緑のdivタグはcssプロパティTOPによって作成されましたが、divタグの位置が絶対で相対であるが静的ではない場合にのみTOP、BOTTOMなどが機能するという欠点があります

視覚的に達成しようとしているものに依存します。 container には、段落のいずれかの側の溝にぶら下がる他の子要素がありますか？もしそうなら、マージンはより理にかなっています。ただし、 container にすべての要素（ピリオド）に12ピクセルの余白がある場合、複数の要素セットにマージンを適用する必要がないように、パディングを使用するのが最も理にかなっています。

一般的に、段落の先頭に一貫性を持たせるために、段落には常に縦方向の余白が必要です。

個人的に、 #container {padding：12px;} のオプションaを使用します。これは、すべての子要素が、このdivの境界線。

他の要素を #container の境界から12ピクセル以上離しておく場合は、その要素にさらに多くのマージンを適用します。

乾杯！

分割の垂直方向のパディング-複数の段落の間に異なる垂直方向のスペースが必要だと判断した場合、下マージンを使用します。内部に静的に配置された要素があるだけです。

違いは、境界線の位置です。

境界線は、マージンとパディングの中央にあるSMACK DABにあります。マージンを指定する場合、それは境界の外側の空白です。

パディングを指定した場合、それは境界線の内側の空白です（要素からさらに境界線を押し出します）

CSSの除去のためここに表示できませんが、これを試してください：

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

その他のもの

  • パディングは要素の背景色をもたらし、マージンは基本的に透明です

  • 一部の要素（tdなど）は余白を無視しているようですが、パディングの変更に応答します

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top