使用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 />

纠正了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交互故障。