更好的方法來控制塊元素之間的間距？

Question

有沒有更好的方法來控制某些塊元素之間的空間..我基本上有一些這些。

<div id="head1" class="global-box"> 
    <p>My Header Name</p> 
    <select id="Select1"> 
     <option></option> 
    </select> 
</div> 

的問題是，我的頭名和選擇html元素之間的空間大於我想......我試圖消除<p>但隨後直線，然後選擇它是在同一行頭標題..

我可以使用<br/>但這只是創建一個塊？

Answer 1

首先檢查到使用全局復位樣式表（見Resetting Again by Meyer或YUI復位）

這將刪除所有保證金的分配在所有瀏覽器，以確保一致性。

然後在你的CSS樣式使用：

div.global-box p.header { margin: 0 0 5px 0; } 

哪裏5px的是下邊距（右上左下），所以你可以把它任何你想要的。

Answer 2

嘗試< select style ='margin-top：0px; padding-top：0px;' >

Answer 3

在你的CSS

.global-box p { 
    margin-bottom: 2px; 
} 

.global-box select { 
    margin-top: 2px; 
} 

你可能只需要其中的一個，但很難知道哪些。

Answer 4

如果你想爲眼前這個<p>做到這一點：

#head1 > p { margin-bottom: 0px; } 

否則，如果您想要爲所有class="global-box"元素做到這一點：

.global-box > p { margin-bottom: 0px; } 

需要注意的是，如果這不給您在選擇前有足夠的空間，您可以增加保證金最低金額。

Answer 5

元素之間的可視空間，一般會是要麼

• 填充
• 保證金

所以，如果你想要更小的空間，你的標題行改爲

<p style="margin: 0px; padding: 0px">My Header Name</p> 

和

一起玩吧。