15

以下のように、(論理的な) コンテナー div 内に (論理的に意味のある) div をスペースを空けて配置したい場合、

スペース付きの div 内の div

2つの方法のうち、どちらがより論理的に正しいでしょうか?

  • コンテナのパディング プロパティを設定する
  • 内部にある div の margin プロパティを設定します

次のように、コンテナに複数の要素がある場合があります。

コンテナ div 内の複数の div

このような場合、要素の周囲のスペースとは別に、要素間のスペースを設定する必要があります。間のスペースについては、コンテナーの padding プロパティを使用できず、内部の要素のマージン (-left または -right) を使用する必要があります。これを考慮して、コンテナと要素の間のスペースを設定するために、要素のマージン（-left、-right、-top、-bottom）またはコンテナのパディングを設定する方が理にかなっているのか疑問に思っています.

フレックスボックスを使用しています。そして、私も設定を持っていますbox-sizing: border-box;。必要に応じて、CSS セレクターを自由に使用できますnth-child。

4

4 に答える 4

10

追加するガターの種類を検討してください。要素を互いに分離することですか？要素内にスペースを作成することですか？

例の青のように、要素のすべての側面のガターの場合:

ここに画像の説明を入力

ここでは、コンテナにパディングを使用します。論理的には、それがまさに私が望んでいることなので、他のことを考える必要はありません。

2番目の例の緑色の要素間のスペースのように、行の要素間のガターの場合:

ここに画像の説明を入力

ここでは、緑の要素にマージンを使用します。それらの間には明らかにマージンがあるため、パディングはあまり意味がありません。

ただし、これら 2 つの例を一緒に使用すると、緑色の要素のマージンが親のパディングと競合する可能性があるという問題が発生します。最初と最後の子からマージンを削除することでこれを管理します。

さらに、新しい行にこれらの細かい緑色の要素がさらに必要になる場合があります。私は通常、フロートをクリアする適切な方法で行全体をラップする要素を使用して、すべての行をクリアします。明らかに、ここで親のパディングと同じ競合が発生しますが、同じ方法で簡単に処理できます (つまり、最後の行からマージンを削除します)。

つまり、要するに：

  • エッジとその子の間のガターの親要素のパディング。
  • 同じ親を持つ要素を互いに分離するマージン。
  • マージンが親のパディング (行の最初および/または最後の子、列の最後の子) に接続されている場合、その子からマージンを削除します。

免責事項：これが私のやり方です。これが最も効率的な方法であるとは約束できませんが、私にとって最も理にかなっている方法です。

于 2013-06-02T08:22:59.367 に答える
5

divコンテナ内に存在する にマージンを設定することを好みます。

下の黒い部分divが 、 、 の外側のコンテナだdisplay: flexとwidth: 300pxしheight: 200pxます。外部にpadding: 30pxパディングを割り当てると、幅と高さが決まります。コンテナが伸びるとは思わないので、これはコンテナ div の周りの要素に影響します。したがって、内側にマージンを使用することをお勧めします。div360px260pxdiv

ここに画像の説明を入力

内側とコンテナーの間にマージンを割り当てるdivと、実際の外側divは移動せず、マージンは内側の div のみに影響するため、その周囲の要素には影響しません。

使用している場合はbox-sizing: border-box;、それに応じて状況が変化するため、要素の実際のサイズに完全に依存します。内側の要素にマージン/パディングを使用するのが正しい方法です。

于 2013-06-02T08:00:37.943 に答える
3

これには厳密なルールはありません。すべてコンテキストに依存するためです。複雑な設計では、通常、どちらか一方を使用して目的の結果を得るしかありません。

とはいえ、論理的に関連するルールをグループ化するようにしてください。たとえば、同じ目的を果たす 2 つの HTML 要素が Web サイトにある場合、たとえば外側<div>のボックスと別の同様のボックス (パディングを取得しない) がある場合、他のすべてが等しい場合は、内側にa を設定することをお勧めします。margin<div>

ただし、複数の要素を outer に配置する<div>場合は、実際にはパディングを使用する必要があります。これにより、すべての内部要素が一度に処理されるためです。@zzzzBovの答えも同様に機能しますが、マージンの崩壊に依存しているため、対処が難しい場合があります。

編集:あなたの2番目の状況では、私は通常、次のようにpaddingandを組み合わせmarginます:

.outer {
    padding: 10px 15px 10px 5px
}

.inner {
    margin-left: 10px
}

おそらく複雑に見えますが、マージンの崩壊に関係なく機能し、非常に役に立ちました。

于 2013-06-02T08:06:41.433 に答える
2

後続のコンテンツがどのようにレンダリングされるかによって異なります。<div>同じ量の間隔で区切られた複数の内部s (緑) を使用する場合marginは、マージンの折りたたみにより div が次のようにレンダリングできるように使用するのが理にかなっています。

+-------
|        <- blue
|  +----
|  |     <- green
|  |
|  +----
|
|  +----
|  |     <- green
|  |
|  +----
|
+-------

さまざまなオプションの例を次に示します。

于 2013-06-02T07:57:51.527 に答える