更好的方法来控制块元素之间的间距？

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> 

和

一起玩吧。