2つのdivの間のスペース

Question

私の問題は、同じクラスの2つ（またはそれ以上）のdivがあり、互いに離しておく必要があることです。しかし、私は余白を直接使うことはできません。最後か最初の要素にもマージンが適用されるので、私は望みません。

- グリーン私はスペース
-Redは私が考えることができる唯一のソリューションが複雑であるため、私はそれ

たくない場所/ハードコーディング値を含んでいるしたい場合は、Iであります誰かがこの問題に対する巧妙で簡単な解決策を考えることができることを願っています。

詳細：時にはこれらの部門はそれ自身であり、まれにしか浮かびません。

、任意の新しいアイデア良くなるか、単に一般的に助けることができる方法のアイデア以上に何かアドバイスをいただければ幸いです。）

Answer 1

次のような何かを試すことができます。

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

または代わりに、

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

またはより良いadjacent sibling selectorを使用します。最初のh1ルールの。次のセレクタを使用すると、1つのルールであなたのケースをカバーすることができます：

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

それぞれ、h1 + divはあなたに追加のスタイリングオプションを与えて、あなたのヘッダの後の最初のdivを制御します。

Answer 2

なぜマージンを使用しないのですか？要素にすべての種類の余白を適用することができます。その周りのマージンだけではありません。これは、複数の要素を参照しているし、あなたが、具体的

すなわち、異なるようにしたいもののためにidを使用することができますので、

あなたはCSSクラスを使用する必要があります。ここでは

<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例です。

• http://jsfiddle.net/baXmu/2/

REFERENCE：

• http://www.html.net/tutorials/css/lesson10.php

Answer 3

あなたがIE6のサポートを必要としない場合：

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

二行目は、div要素の間の間隔が追加されますが、最初のdivの前に任意のを追加しませんまたは最後のものの後。

Answer 4

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;}