[FIXED] How to get rid of the <hr> vertical spacing?

Issue

TLDR: click the bottom image and my noob problem becomes immediately evident.

---

Hi, all

I have two <div> elements that I want to separate with a <hr class="separator"> element.

The CSS code for the <hr class="separator"> element is as follows:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

The CSS code for the bottom <div class="brown"> element is as follows:

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

In the HTML code, these elements are set like this:

<div> upper div \<div>
<hr>
<div> bottom div \<div>

Still, I have a vertical whitspace (about 3px) between them. I've already tried to set all margins and padding to "0", and even played around with making the <hr>a child of each <div>and playing around with the position attribute (which invariably made the <hr>disappear).... Can anyone help a newbie here?

Solution

With:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

you only set/change the top border but the hr could also have other borders.

So first remove all borders with border: none; and then set the top border:

hr.separator {
    border: none;
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

<hr class="separator">
<div class="brown">

</div>

Whenever you have you don't know why something looks wrong you should check the computed properties of the style that is applied for that element in the developer tools of your browser.

Answered By - t.niese

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More