CSSマージンはどこに置きますか?[閉まっている]

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

  •  01-07-2019
  •  | 
  •  

質問

(CSSを使用して) HTML要素の間に空白を追加したい場合、どの要素に空白を追加しますか?

私は定期的に次のような状況に陥ります。

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div>This is a footer</div>
</body>

ここで、これらの各要素の間に 1em のスペースが必要だが、最初の h1 より上または最後の div より下にはスペースがないとします。どの要素にアタッチすればよいでしょうか?

明らかに本物は存在しない テクニカル これの違い:

h1, p { margin-bottom: 1em; }

...この...

div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }

私が興味があるのは二次的な要因です。

  1. 一貫性
  2. あらゆる状況に適用可能
  3. 使いやすさ / シンプルさ
  4. 変更の容易さ

例えば：この特定のシナリオでは、最初の解決策の方が単純であるため、2 番目の解決策よりも優れていると思います。単一のプロパティ定義内の 2 つの要素に margin-bottom をアタッチしているだけです。ただし、より汎用的なソリューションを探しています。CSS の作業を行うたびに、適用すべき適切な経験則があるように感じます...しかし、それが何なのかわかりません。誰か良い議論を持っている人はいますか？

役に立ちましたか？

解決

次の要素の前にスペースを確保したい場合は、要素に下マージンを使用し、CSS で「.last」クラスを使用して最後の要素からマージンを削除することがよくあります。

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div class="last">This is a footer</div>
</body>

div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }

ただし、あなたの例では、これはおそらくそうではありません それ フッター div は独自のクラスと特定のスタイルを持つ可能性が高いため、これは当てはまります。それでも、私が使用した「.last」アプローチは、いくつかの同一の要素（段落など）が次々にある場合には機能します。もちろん、私は「Elements」CSS フレームワークからこのテクニックを厳選しました。

他のヒント

高度な CSS 2 セレクターを使用すると、クラスに依存しない別のソリューションが可能になります。 last レイアウト情報を HTML に導入します。

このソリューションでは、 隣接するセレクター。残念ながら、MSIE 6 はまだこれをサポートしていないため、使用したくないのは当然です。

h1 {
    margin: 0 0 1em;
}

div, p, p + h1, div + h1 {
    margin: 1em 0 0;
}

このように、最初の h1 上マージンはありませんが、 h1 段落またはボックスの直後にある もっている 上部のマージン。

要素の周囲にスペースが必要な場合は、余白を与えてください。つまり、この場合、単に与えるだけではなく、 <h1> 下マージンを与えますが、 <p> 上部のマージン。

2 つの要素が垂直方向に隣接しており、間に境界線やパディングがない場合、マージンが崩れることに注意してください。つまり、2 つのマージンのうち大きい方のみが考慮され、合計されません。したがって、この：

h1, p { margin: 1em; }

<h1>...</h1>
<p>...</p>

...見出しと段落の間に 1em のスペースが生じます。

これは、デザインの目的の詳細によって部分的に左右されますが、たとえば、典型的なブログのインデックスには、これらのものの大まかな階層構造のようなものがあります。

  • 1 ページに 1 つのフッターが表示されます。
  • ヘッダーは 1 つずつになります エントリ.
  • エントリごとに n 段落が含まれることになります。

段落が連続して出現する場合があることを承知して、段落に空白を設けます。連続としてどのように見えるかを考慮する必要があります。そこから、ヘッダーを調整してエントリ間の境界を処理します。最後に、フッターと本文の間隔を調整して、ページの下部が適切に見えるようにします。

サムネイルスケッチです。最終的にパディングをどのように割り当てるかは完全にあなた次第ですが、ボトムアップの観点からアプローチすると、調整時に驚くことが少なくなる可能性があります。 初め 最も一般的/豊富な要素、そして 後で あまり一般的ではないもの。

ジムが主張している点が鍵です。要素間のマージンは折り畳まれますが、追加的なものではありません。段落と見出しの上下に 1em のマージンを確保し、ヘッダーの下とフッターの上に 1em のマージンを確保したい場合は、CSS でそれを反映する必要があります。

このマークアップを考えると (ヘッダーを追加し、ヘッダー/フッターに ID を配置しました):

<body>
  <div id="header"></div>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div id="footer">This is a footer</div>
</body>

この CSS を使用する必要があります。

#header {
  margin-bottom: 1em;
}

#footer {
  margin-top: 1em;
}

h1, p {
  margin: 1em 0;
}

これで、要素の順序は重要になりません。2 つの連続した見出しを使用する場合、または見出しの代わりに段落でページを開始する場合でも、インデントされた方法でレンダリングされます。

私は比較的初心者ですが、あなたも私も直面していると思われる問題に対する私なりの解決策です (1 つのタグのマージンを変更すると、サイトの一部のスペースが整理される可能性がありますが、他の場所では以前は適切だったスペースが乱されるだけでしょうか?)すべてのタグの上下に等しいマージンを割り当てるようになりました。H3 や p よりも H1 の上下にもっと多くのスペースが必要な場合がありますが、一般的に、特定のテキストの上下に均等なスペースがあるページは見栄えが良いと思います。そのため、この解決策は私にとってうまく機能し、あなたの「シンプルな」ニーズを満たします「経験則」の仕様も期待できます!

これは次のように行う必要があります。

body > * {
    margin-bottom: 1em;
}
body > *:last-child {
    margin-bottom: 0;
}

これで、どの要素が最初でどの要素が最後であるかを心配する必要がなく、常に最後の要素に特別なクラスを配置する必要もありません。

これが「機能」しないのは、最後の子がレンダリングされない場合だけです。このような状況の場合、申請を検討してみてはいかがでしょうか margin-bottom:0; 最後に表示されている子のクラスを使用します。

最初の選択肢の方が良いという意見には、私も同意する傾向があります。それは一般的に私がやりたいことです。ただし、ブラウザーごとにマージンの処理方法が異なるため、これらの要素のそれぞれにマージンを指定し、それを適用したくない場合はゼロにする必要があるという議論もあります。<p> (および <h1> タグもだと思います) には、何も指定されていない場合、通常、ブラウザーによって指定されるデフォルトのマージンが設定されます。

最初の子と最後の子を使用しました。たとえば、単純な CSS では次のようになります。

h1{
    margin-top:10px;
    margin-bottom:10px;
}
h1:first-child{
    margin-top:0px;
}
p{
    margin:10px;
}
p:first-child{
    margin-top:0px;
}
p:last-child{
    margin-bottom:0px;
}

これは基本的な例ですが、これをより多くの要素に適用でき、SASS、LESS などを使用すると構造がより良くなります:)

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