How do I get <hr> margin working?

Question

I am trying to add a "hr" in my Wordpress pages to space out my content. I have styled it as follows:

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; 
}

The HTML I am using in the Wordpress page is as follows:

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

My problem with the "hr" is that it's margin-top 26px doesn't push it away from the "p" above. Instead, the margins of the "hr" and "p" seem to overlap.

So far, I have been able to fix this problem by adding this:

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

It seems a bit long winded to add

<div class="generic-container"> 

at the top of each section of the page, and then adding the "/div" to close it off above every "hr".

I have tried adding "overflow: hidden;" into the...

p

main.content

.entry-content

...but this doesn't seem to work.

Please can anyone give me some suggestions as to how to make the "hr" margin activate, to move it away from the elements above it?

Thank you for reading.

---

Added below after replies up to @symlink :

Thank you all for your replies. Despite changing "p" margin-bottom to padding-bottom, this code 'below' still doesn't work (still trying without "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>

---

Added below after my reply 'comment' to @Marc Audet :

The code works at keeping the boxes above the hr away from the hr, but not boxes underneath it.

Following the suggestion from Marc, I have created this to keep boxes above and beneath the hr away from the 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>

If anyone can suggest how to create space beneath the "hr" without having to use the "hr" with the "after-hr" in the HTML, I welcome any suggestions.

Perhaps some way to get "hr::after" doing the job. Thanks

Answer 1

Here is another approach based on your snippet that has floated elements.

On the hr element, you can add clear: both so that the hr element is positioned below all the floated elements.

To take care of the vertical whitespace at the top of the horizontal rule, make sure that the border is set to show only the bottom (or top) and add some padding to the top to control the separation.

If you want to control the spacing after the hr element, you can adjust margin-bottom, as shown below. This seems to work pretty well.

I tested this in Firefox, should work in other browsers.

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