39

ブロック要素のシーケンスがあり、それらの間にマージンを配置したい場合。

margin-top、margin-bottom、またはその両方、どちらが好みですか? なんで？

4

8 に答える 8

33

コンテキストに依存します。しかし、それを削除するためにmargin-top使用できるため、一般的には優れています。:first-childそのようです：

div.block {
    margin-top: 10px;
}

div.block:first-child {
    margin-top: 0;
}

このように、余白はブロックの間にのみあります。

明らかに、最新のブラウザでのみ機能します。

于 2008-11-12T18:30:51.633 に答える
19

margin-bottomつまり、最初の要素の前に不要なスペースがありません。

于 2008-11-12T18:28:09.750 に答える
14

別のオプションは、+セレクターを と組み合わせて使用​​することmargin-topです。

.article + .article {
    margin-top: 10px;
}

これは後者の要素を選択します。つまり、ルールは最初の要素にはまったく適用されません。追加のクラス、疑似クラス、または要素の上または下のスペースはありません。

/* CSS rules for legibility. */
section, article {
  outline: 1px solid blue;
}

section {
  background: lightgreen;
  padding: 10px;
}

section + section {
  margin-top: 30px;
}

article {
  background: lightblue;
}

/* Using the + selector. */
#PlusSelectorExample article + article {
  margin-top: 30px;
}

/* Using margin-bottom only. */
#MarginBottomExample article {
  margin-bottom: 30px;
}

/* Using last-child. */
#LastChildExample article {
  /* Other CSS rules for this element. */
  margin-bottom: 30px;
}

#LastChildExample article:last-child {
  margin-bottom: 0;
}
<p>The plus selector only selects an element following another. Combining the plus selector and margin-top means there's no extra space at the top since the selector doesn't apply.</p>
<section id ="PlusSelectorExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Using margin-bottom leaves an extra gap at the bottom.</p>
<section id="MarginBottomExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Combining margin-bottom with last-child achieves the same as the plus operator.</p>
<section id="LastChildExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>

于 2013-02-14T22:25:49.377 に答える
2

私は常に、よりオプションと見なす要素にマージンを設定します。つまり、DOM から削除される可能性が高い要素です。例：

<div class="title">My Awesome Book</div>
<p>Description of My Awesome Book</p>

この場合、説明はタイトルなしではあまり意味がありませんが、タイトルだけに言及したい場合は、説明が削除される可能性があるため、margin-topに置きます。<p>

もう一つの例：

<img src="icon.png">
<div>My Awesome Book</div>

ここでは、反対のことをします。アイコンに追加margin-bottomさせていただきます。私はアイコンをただの装飾と考えており、繰り返しになりますが、削除される可能性が高くなります。

これが私の哲学です。潜在的な DOM の変更による CSS の変更を防ぐ方法として、要素をスタイルします。

于 2016-06-27T11:38:43.110 に答える
1

@This Mat - 私はあなたのアプローチに同意しません。セマンティックな方法で要素に間隔を割り当て、コンテキスト セレクターを使用してその要素のコレクションの動作を定義します。

.content p { /* obviously choose a more elegant name */
   margin-bottom: 10px;
}

内容ではなく動作に基づいてクラスに名前を付けるのは、滑りやすい坂道のようなものであり、HTML のセマンティックな性質を台無しにします。たとえば、ページの 1 つの領域で、クラス .top10 を持つすべての要素が突然代わりに 20 ピクセルを必要とした場合はどうなるでしょうか? 単一のルールを変更する代わりに、新しいクラス名を作成し、影響を与えるすべての要素でそれを変更する必要があります。

元の質問に答えるには、要素をどのように積み重ねるかに完全に依存します。上部または下部に余分なスペースが必要ですか?

于 2008-11-15T18:41:12.493 に答える