我如何获得 <hr> 保证金？

Question

我正在尝试在我的 Wordpress 页面中添加一个 "hr" 到 space 我的内容。我的样式如下：

p {
-webkit-font-smoothing: antialiased;
color: #555555; 
font-family: Helvetica, 'Helvetica Neue', Arial, 'Lato', sans-serif; 
font-size: 16px; 
font-weight: 400; 
line-height: 1.25em;
padding: 0px;
margin: 0 0 12px 0;
}

h4 {
color: #111111;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; 
font-size: 16px;
font-weight: 900; 
line-height: 1.2em;
margin: 0 0 8px 0; 
}

hr { 
display: block;
width: 100%;
height: 1px;
background: #cccccc; 
border: none;
outline: none;
padding: 0px !important;
margin: 26px 0 13px 0 !important; 
}

我在Wordpress页面中使用的HTML如下：

<h4>Make your selection</h4>
<p>
<input type="radio" name="left-or-right" value="left" checked="checked" />
Turn Left<br />
<input type="radio" name="left-or-right" value="right" /> Turn Right</p>

<hr>

我对 "hr" 的问题是它的 margin-top 26px 没有将它推离上面的 "p"。相反，"hr" 和 "p" 的边距似乎重叠了。

到目前为止，我已经能够通过添加以下内容来解决这个问题：

.generic-container {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
display: block;
overflow: hidden;
}

<div class="generic-container">
<h4>Make your selection</h4>
<p>
<input type="radio" name="left-or-right" value="left" checked="checked" />
Turn Left<br />
<input type="radio" name="left-or-right" value="right" /> Turn Right
</p>
</div>

<hr>

补充起来好像有点啰嗦

<div class="generic-container">

在页面每个部分的顶部，然后在每个 "hr".

上方添加“/div”以将其关闭

我尝试将 "overflow: hidden;" 添加到...

p

main.content

.entry-content

...但这似乎不起作用。

任何人都可以给我一些关于如何激活 "hr" 边距，将其从上面的元素移开的建议吗？

感谢您的阅读。

在@symlink 回复后添加如下：

谢谢大家的回复。尽管将 "p" margin-bottom 更改为 padding-bottom，此代码 'below' 仍然不起作用（仍在尝试没有 "generic-container"）：

CSS

.width-80pc {
width: 80%;
}
.width-20pc {
width: 20%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

p.toby-small-text {
color: inherit;
font-weight: inherit;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.25em;
padding-bottom: 5px;
margin: 0px !important; 
}

.text-align-left {
text-align: left;
}

HTML

<div class="width-80pc float-left">
<h4>This review is about this service</h4>
<p><input type="radio" name="service" value="one" disabled> Service One</p>
</div>

<div class="width-20pc float-right">
<p class="toby-small-text text-align-left"><a>Service Two</a></p>
</div>

<hr>

在我回复 'comment' @Marc Audet 后添加到下面：

该代码的作用是使 hr 上方的框远离 hr，但下方的框则不然。

根据 Marc 的建议，我创建了这个以保持盒子 above 和 beneath hr 远离 hr ：

CSS

.width-80pc {
width: 80%;
outline: 2px dotted blue;
}
.width-20pc {
width: 20%;
outline: 2px dotted purple;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
p.toby-small-text {
color: inherit;
font-weight: inherit;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.25em;
margin: 0px !important;
}
.text-align-left {
text-align: left;
}

hr {
clear: both;  /* Takes care of you floated elements */
padding-top: 40px;
/* padding-bottom: 20px; This doesn't create space under the hr line */
border: none;
border-bottom: 2px solid red;
height: 0px;
background: transparent;
}

.after-hr {
padding: 0;
margin: 0;
height: 20px;
background: transparent;
}

/* This doesn't seem to work
.after-hr::after {
clear: both;
}
*/

h4, p, p.toby-small-text {
padding: 0 15px 0 15px;
}

HTML

<div class="width-80pc float-left">
<h4>This review is about this service</h4>
<p><input type="radio" name="service" value="one" disabled>Service One</p>
</div>

<div class="width-20pc float-right">
<p class="toby-small-text text-align-left"><a>Service Two</a></p>
</div>

<hr><div class="after-hr"></div>

<div class="width-80pc float-left">
<p>I also need the "hr" to keep away from the boxes underneath it.<br>
By creating ".after-hr" I seem to be able to make some space under it.<br>
I tried to use "hr::after" but it doesn't seem to work.</p>
</div>

如果有人可以建议如何在 "hr" 下创建 space 而不必在 HTML 中使用 "hr" 和 "after-hr"，我欢迎提出任何建议。

也许有一些方法可以让 "hr::after" 完成这项工作。谢谢

Answer 1

这听起来像 collapsing margins issue。您可以通过对 p 使用 padding 而不是 margin.

来修复它

Answer 2

您是否尝试过使用其他浏览器查看它？我正在使用 Chrome 并且老实说它看起来不错（第一位，在添加通用容器之前），它显示在段落下方并且我没有看到任何重叠。 (暂时不能加图给大家看)

Answer 3

不啰嗦加generic-containerdiv。当您应用 overflow:hidden 时发生的事情是您在强制 generic-containter 建立一个新的 块格式化上下文根 。这会做几件事，其中之一是确保 div 内的边距包含在 div 内。好消息是你不需要添加到容器 div 中的任何 CSS 除了 overflow:hidden.

p {
    -webkit-font-smoothing: antialiased;
    color: #555555;
    font-family: Helvetica, 'Helvetica Neue', Arial, 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0 0 12px 0;
}

h4 {
    color: #111111;
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 8px 0;
}

hr {
    height: 1px;
    background: #cccccc;
    border: none;
    outline: none;
    margin: 26px 0 13px 0;
}

.generic-container {
    background:lightblue;
    overflow: hidden;
}

<div class="generic-container">
    <h4>Make your selection</h4>
    <p>
        <input type="radio" name="left-or-right" value="left" checked="checked" /> Turn Left
        <br />
        <input type="radio" name="left-or-right" value="right" /> Turn Right</p>
</div>
<hr>

在此处阅读有关块格式化上下文的更多信息：

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

Answer 4

这是另一种方法，它基于您的具有浮动元素的代码段。

在 hr 元素上，您可以添加 clear: both 以便 hr 元素位于所有浮动元素的下方。

为了处理水平线顶部的垂直空白，确保边框设置为仅显示底部（或顶部）并在顶部添加一些填充以控制分隔。

如果要控制hr元素后的间距，可以调整margin-bottom，如下图。这似乎工作得很好。

我在 Firefox 中测试过，应该可以在其他浏览器中使用。

.width-80pc {
  width: 80%;
  outline: 1px dotted blue;
}
.width-20pc {
  width: 20%;
  outline: 1px dotted blue;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
p.toby-small-text {
  color: inherit;
  font-weight: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25em;
  padding-bottom: 5px;
  margin: 0px !important;
}
.text-align-left {
  text-align: left;
}
hr {
  clear: both; /* takes care of you floated elements */
  padding-top: 20px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid red;
}
p.extra {
  border: 1px dotted blue;
  margin: 0;
}

<div class="width-80pc float-left">
  <h4>This review is about this service</h4>
  <p><input type="radio" name="service" value="one" disabled>Service One</p>
</div>

<div class="width-20pc float-right">
  <p class="toby-small-text text-align-left"><a>Service Two</a></p>
</div>

<hr>

<p class="extra">Some more text.</p>

我如何获得 <hr> 保证金？

How do I get <hr> margin working?

html

css

overflow

margin

hidden