17

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

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

<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 番目のソリューションよりも優れていると言えます。1 つのプロパティ定義で margin-bottom を 2 つの要素にアタッチするだけです。ただし、より汎用的なソリューションを探しています。CSS の作業を行うたびに、適用すべき適切な経験則があるように感じますが、それが何であるかはわかりません。誰かが良い議論を持っていますか？

4

9 に答える 9

7

次の要素の前にスペースを確保したい場合は要素に下マージンを使用し、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 フレームワークから厳選しました。

于 2008-09-19T22:32:55.740 に答える
4

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

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

h1 {
    margin: 0 0 1em;
}

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

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

于 2008-09-21T17:44:15.123 に答える
3

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

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

h1, p { margin: 1em; }

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

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

于 2008-09-19T23:03:56.960 に答える
2

ジムが指摘している点が鍵です。マージンは要素間で崩壊し、加算されません。段落と見出しの上下に 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 つの連続した見出しを使用する場合、または見出しの代わりに段落でページを開始する場合でも、意図した方法でレンダリングされます。

于 2008-09-21T05:35:17.700 に答える
2

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

  • ページに 1 つのフッターを作成します。
  • エントリごとに 1 つのヘッダーを持つことになります。
  • エントリごとに n パラグラフになります。

パラグラフが順番に現れることがあることを知って、パラグラフに空白を設定してください。一連のパラグラフとしてどのように見えるかを心配する必要があります。そこから、ヘッダーを調整して、エントリ間の境界に対処します。最後に、フッター/本文の間隔を調整して、ページの下部がきちんと見えるようにします。

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

于 2008-09-19T22:34:59.417 に答える
1

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

于 2009-04-25T10:12:24.450 に答える
1

これはそれが行われるべき方法です：

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

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

これが「うまくいかない」のは、最後の子がレンダリングされていないときだけです。この状況margin-bottom:0;では、最後に表示された子にクラスを使用して適用することを検討してください。

于 2016-01-14T21:05:18.463 に答える
0

最初の子と最後の子を使用しました。たとえば、プレーンな 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 などを使用すると構造がより良くなります :)

于 2015-11-27T10:13:35.827 に答える
0

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

于 2008-09-19T22:33:21.060 に答える