web-dev-qa-db-ja.com

2つのdiv間のスペース

私の問題は、同じクラスの2つ（またはそれ以上）のdivがあり、互いに間隔を空ける必要があることです。ただし、最後の要素または最初の要素にもマージンが適用されるため、マージンを直接使用することはできません。

example
-緑はスペースが欲しい場所です
-赤は私が望まない場所です

私が考えることができる唯一の解決策は複雑である/値をハードコーディングすることを含むので、誰かがこの問題に対する賢明で簡単な解決策を考えられることを望んでいます。

詳細：これらのdivが単独で存在することもあり、まれに浮かぶこともありました。

上記のアイデアがどのように優れているか、新しいアイデア、または単に一般的な助けになるかについてのアドバイスは大歓迎です;）

csshtmlcss3space
18
Fewfre

次のようなものを試すことができます：

h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

または最初のh1ルールの代わりに：

div:first-of-type{
   margin-top:<x>px;
}

または 隣接する兄弟セレクター を使用することをお勧めします。次のセレクタを使用すると、1つのルールでケースをカバーできます。

div + div{
   margin-bottom:<y>px;
}

それぞれ、h1 + divはヘッダーの後の最初のdivを制御し、追加のスタイルオプションを提供します。

24
Christoph

IE6のサポートが必要ない場合：

h1 {margin-bottom:20px;}
div + div {margin-top:10px;}

2行目はdiv間にスペースを追加しますが、最初のdivの前または最後のdivの後には追加しません。

8
Matt Coughlin

マージンを使用しないのはなぜですか？すべての種類のマージンを要素に適用できます。周囲全体だけではありません。

これは複数の要素を参照しているため、cssクラスを使用する必要があります。具体的に異なるものにはidを使用できます。

すなわち：

<style>
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; }
#first { margin-top: 20px; }
#second { background: #00F; }
h1.box { background: #F00; margin-bottom: 50px;  }
</style>

<h1 class="box">Hello World</h1>
<div class="box" id="first"></div>
<div class="box" id="second"></div>​

Jsfiddleの例を次に示します。

参照：

5
Michael Zaporozhets

もちろん、DIVは分割する以外の有用な意味を本質的に欠いています。

アクションの最善の方法は、意味のあるクラス名をそれらに追加し、CSSで個々のマージンをスタイルすることです。

<h1>Important Title</h1>
<div class="testimonials">...</div>
<div class="footer">...</div>

h1 {margin-bottom: 0.1em;}
div.testimonials {margin-bottom: 0.2em;}
div.footer {margin-bottom: 0;}
1
Jason Hibbs