兩個div之間的空格

Question

我的問題是我有兩個（或更多）同一個類的div，需要彼此隔開。然而，我不能直接使用利潤率，因爲最後或第一個元素也應用了保證金，這是我不想要的。

- 綠色是我想要的空間
- 紅色是我不希望它

作爲唯一的解決方案，我能想到的是複雜的/包括硬編碼值嗎，我我希望有人能夠想出一個聰明，簡單的解決方案來解決這個問題。

詳細信息：有時候這些div會自行出現，並且在罕見的情況下浮動。

的想法如何上面可以更好任何意見，任何新的想法，或者只是在一般的幫助將不勝感激;）

Answer 1

您可以嘗試類似如下：

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

甚至更​​好的使用adjacent sibling selector。用下面的選擇，你可以掩蓋你的情況下，一個規則：

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

分別，h1 + div將你的頭後，控制第一格，給你更多的時尚選擇。

Answer 2

爲什麼不使用保證金？您可以將各種邊距應用於元素。不只是它周圍的整個邊緣。

你應該使用，因爲這是引用多個元素的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例如：

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

參考：

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