Html 用 Css 做一个横向规则并有边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7096909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a Horizontal Rule with Css and have margins
提问by joncodo
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
这就是我现在正在做的，但边距似乎没有效果！我不知道为什么，但这个“水平线”上下的文字没有边距接触水平线。在这种情况下有没有办法实现利润率？
采纳答案by Nachshon Schwartz
Problem is your not closing the div:
问题是你没有关闭 div：
You cannot close a div as you did there must be a closing tag as so:
你不能像你那样关闭 div 必须有一个结束标签，如下所示：
<div></div>
and not
并不是
<div />
corrected jsfiddle:
更正的jsfiddle：
EDIT
编辑
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
最终的解决方案是添加 1px 的最小高度，因为空的 div 有时会做一些奇怪的事情。
Final CSS:
最终的 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;
}
回答by creativeedg10
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" />This may help resolve some div interaction glitches.
如果这是水平规则，我建议将您的类添加到水平规则标签，<hr class="horizontalRule" />这可能有助于解决一些 div 交互故障。
回答by sdleihssirhc
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div />and thinks that the paragraph after that is partof the div. So change your HTML to something like this:
它下面的文本紧靠该行的原因是因为您没有正确关闭 div。浏览器看到<div />并认为后面的段落是div 的一部分。所以把你的 HTML 改成这样：
<div class="horizontalRule" runat="server"></div>
