html - 如何让 margin 发挥作用？

Question

我想在我的 Wordpress 页面中添加一个“hr”来隔开我的内容。我将其设计如下:

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"> 

在页面每个部分的顶部，然后添加“/div”以在每个“hr”上方将其关闭。

我尝试添加“溢出:隐藏；”进入……

p

main.content

.entry-content

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

谁能给我一些关于如何激活“hr”边距，将其从其上方的元素移开的建议？

感谢阅读。

---

在回复@symlink 后添加如下:

谢谢大家的回复。尽管将“p”margin-bottom 更改为 padding-bottom，“下面”的这段代码仍然不起作用(仍在尝试不使用“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>

---

在我对@Marc Audet 的“评论”回复之后添加:

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

根据 Marc 的建议，我创建了这个来使 hr 的 above 和 beneath 框远离 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”下方创建空间而不必在 HTML 中将“hr”与“after-hr”一起使用，我欢迎任何建议。

也许有某种方法可以让“hr::after”完成这项工作。谢谢

Answer 1

这是另一种基于具有 float 元素的代码段的方法。

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

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

如果要控制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>