Html 设置 hr 标签页边距的最简单方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20529331/
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
What's the simplest way to set the margins for the hr tag?
提问by Adam Zerner
Particularly, I'm looking to set the top and bottom margins. I tried margin: 10px 0;, and it didn't work. I've googled around, and stuff is either way outdated, or a bad answer.
特别是，我希望设置顶部和底部边距。我试过了margin: 10px 0;，没有用。我已经用谷歌搜索过，东西要么过时，要么回答不好。
EDIT: Code
编辑：代码
html
html
<div id="new_information_section">
<div class="tabbable">
<ul class="nav nav-pills" id="info_nav">
<li class="active"><a href="#">Admissions</a></li>
<li><a href="#">The School</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<section id="sat_scores">
<div class="chunk">
<h3>SAT Scores</h3>
<ul>
<li>Math: 600-690</li>
<li>Reading: 570-690</li>
<li>Writing: 560-660</li>
<li>Composite: 1130-1320</li>
<hr />
<li>89% submit</li>
</ul>
</div>
<div class="chunk">
<canvas id="sat_math" width="200" height="200"></canvas>
</div>
</section> <!-- SAT Scores -->
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
css
css
#new_information_section {
#info_nav {
margin-top: 50px;
}
.chunk {
display: inline;
float: left;
clear: none;
margin-right: 100px;
}
h3 {
font-family: Verdana;
}
ul {
li {
margin: 10px 0;
}
hr {
width: 50%;
}
}
}
回答by Ani
You can do: HTML
你可以这样做： HTML
<ul>
<li>Math: 600-690</li>
<li>Reading: 570-690</li>
<li>Writing: 560-660</li>
<li>Composite: 1130-1320</li>
<li><hr class="myhrline"/></li>
<li>89% submit</li>
</ul>
CSS
CSS
hr.myhrline{
margin: 10px;
}
回答by fiskolin
Are you looking for this?
你在找这个吗？
HTML
HTML
<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<hr class="line">
<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
CSS
CSS
hr.line {
width: 90px;
color: red;
margin-top: 30px;
margin-bottom: 30px
}
回答by Jon Newmuis
It does indeed work, as evidenced by this JSFiddle.
Note the styling on the hr:
注意 hr 上的样式：
hr {
margin: 10px 0;
}
As Ani has alluded to in the comments, if this is in an email template, you will need to put the style inline, directly on the hrelement, as follows:
正如 Ani 在评论中提到的，如果这是在电子邮件模板中，您需要将样式直接放在hr元素上，如下所示：
<hr style="margin: 10px 0" />
