使用Css制作水平标尺，并留出页边距

Question

div.horizontalRule {
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:5px;
    margin-bottom:5px;
}

这就是我现在正在做的，但是页边距似乎没有任何影响！我不知道为什么，但是这个“水平线”上面和下面的文本都接触到了没有边距的水平线。在这种情况下，有没有办法实现边际？

http://jsfiddle.net/fwqSH/

Answer 1

问题是你没有关闭div：

不能像关闭div那样关闭一个div，必须有一个结束标记：

<div></div>

而不是

<div />

已更正jsfiddle：

http://jsfiddle.net/fwqSH/1/

编辑

最后的解决方案是添加一个1px的最小高度，因为空的div有时会做一些奇怪的事情。

最终CSS：

div.horizontalRule {
    min-height: 1px;
    clear:both; width:100%;
    border-bottom:1px solid #d1d1d1;
    height:1px; padding-top:5px;
    margin-top:5px;
    margin-bottom:5px;
}

Answer 2

下面的文本正好与行对齐的原因是因为您没有正确地关闭div。浏览器看到<div />并认为后面的段落是div的part。因此，将您的HTML更改为如下所示：

<div class="horizontalRule" runat="server"></div>

Answer 3

如果这是一条水平线，我建议将你的类添加到水平线标签中，<hr class="horizontalRule" />这可能有助于解决一些div交互故障。