3

このリンク（および私がチェックした他のすべての「マージンとパディング」の質問）は、同じ質問をしても、2つの違いのみを示しているようです。「外側にスペースが必要な場合はマージンを使用し、内側にスペースが必要な場合はパディングを使用してください」と書かれています。

これで十分ですが、この簡単な jsFiddle の例を見ると、まったく同じ効果を得るためにさまざまな CSS を使用しています。

この質問は主観的なものであり、解決される可能性がありますが、「包含要素にパディングを配置する必要があるか... または内部要素自体にマージンを配置する必要があるかどうか」を決定するのに多くの時間を無駄にします。

これらの div を拡張して複数の段落を含めると、3 番目の例は、一貫した境界線/背景が必要な場合にすぐに失敗します。タグに Margin を使用した<p>ものは、自動的に段落を区切るので見栄えがよくなります。

Web サイトのスタイルを設定するときに、結論を出すために自問できる簡単な思考プロセス/一連の質問はありますか?

4

3 に答える 3

5

この質問からのItay Moav の回答は、マージンを使用する条件と、パディングを使用する条件に関する適切なチェック リストを提供すると思います。ここにコピーして貼り付けます。

  1. ある種のバックグラウンド プロパティがあります。マージンはそれらを取得しません。
  2. あなたには国境がある
  3. TD を使用する (マージンなし)
  4. ネストされた 2 つのアイテム。余白は一緒に折りたたまれていますが、パディングはありません。（これは要チェック）
  5. それらはおそらく要素の幅と高さに異なる影響を与えます。（誰かがよく知っている場合は、これを編集してください）。
于 2012-10-18T09:09:43.920 に答える
3
  • マージンは互いに折りたたむことができます。つまり、マージンが3emの2つの要素には、それぞれ3emのスペースがあります。
  • パディングは折りたたまれません。つまり、3emのパディングを持つ2つの要素には、コンテンツ間に6emのスペースがあります。
  • マージン/パディングのある要素に背景や境界線を適用するとすぐに、2つは非常に異なる動作になります

それらを念頭に置いて、必要に応じて適用してください。厳格なルールはありません。

于 2012-10-18T09:06:03.930 に答える
0

マージンは問題のオブジェクトの外側のギャップですが、パディングは内側のギャップです。

つまり、オブジェクトがテキストが入った緑色のボックスで、白い背景がある場合、マージンは白い領域にギャップを残し、パディングは緑色の葉を残します。

于 2012-10-18T10:38:37.537 に答える