4

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

これが典型的な例です、

まず、平易な英語で：

  • 状況：コンテナ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;}

乾杯！

ジョン

4

7 に答える 7

4

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

  1. ある種の背景プロパティがあります。マージンはそれらを取得しません。
  2. あなたには国境があります
  3. TDを使用します（マージンなし）
  4. 2つのネストされたアイテム、余白は一緒に折りたたまれますが、パディングは折りたたまれません。
  5. （これを確認する必要があります）おそらく、要素の幅と高さに異なる影響を与えます。（誰かがもっとよく知っているなら、plsはこれを編集します）。
于 2009-09-14T04:01:23.690 に答える
3

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

于 2009-09-14T03:14:48.313 に答える
3

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

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

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

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

于 2011-12-01T14:49:39.750 に答える
2

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

一般的に言えば、一貫した段落の先頭を確保するために、段落には常に垂直方向の余白が必要です。

于 2009-09-14T03:13:59.320 に答える
1

個人的には、オプションaを使用します。これは、すべての子要素がこのdivの境界から12px離れている必要#container {padding: 12px;}があることを十分に明確にしているためです。

他の要素を'の境界線から12px以上離したい場合は、#containerその要素にできるだけ多くのマージンを適用します。

乾杯！

于 2009-09-14T03:17:03.447 に答える
0

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

于 2009-09-14T03:13:36.507 に答える
0

違いは、境界線がどこにあるかです。

境界線は、余白とパディングの中央にSMACKDABがあります。マージンを指定すると、それは境界線の外側の空白になります。

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

cssストリッピングのため、ここに表示できませんが、これを試してください。

<body style = "background-color：#aaa">
<p style = "background-color：#aee; margin：40px; padding：40px; border：solid 2px black;">
  余白、パディング、ボーダーがあります。
</ p>

<p style = "background-color：#aee; margin：40px; padding：0; border：solid 2px black;">
  余白と境界線があります。
</ p>

<p style = "background-color：#aee; margin：0; padding：40px; border：solid 2px black;">
  パディングとボーダーがあります。
</ p>
</ body>

他のもの！

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

  • 一部の要素（tdなど）は、パディングの変更に応答する一方で、マージンを無視しているように見えます

于 2009-09-14T03:16:05.220 に答える