控制块元素间距的更好方法是什么？

Question

有没有更好的方法来控制某些块元素之间的空间..我基本上有一些这些。

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

问题是My Header Name和select html元素之间的空间大于我想要的...我尝试删除<p>但是它的行和select选择与标题标题位于同一行..

我可以使用<br/>，但这只会创建一个块？

Answer 1

在你的CSS中

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

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

你可能只需要其中一个，但很难知道哪个。

Answer 2

尝试＆lt; select style ='margin-top：0px; padding-top：0px;'＆gt;

Answer 3

如果您只想为此<p>执行此操作：

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

否则，如果要对所有class="global-box"元素执行此操作：

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

请注意，如果在选择之前没有足够的空间，您可以增加保证金最低金额。

Answer 4

元素之间的可见空间通常是

• 填充
• 余量

因此，如果您想要更少的空间，请将标题行更改为

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

然后玩它。

Answer 5

首先使用全局重置样式表（请参阅Resetting Again by Meyer或YUI重置）

进行检查

这将删除所有浏览器中的所有保证金分配以确保一致性。

然后在CSS样式中使用它：

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

5px是底部边距（右上角左下角），所以你可以随心所欲地制作它。