Blog Improve It

Margins on the HR tag: a case solved

Posted by Leandro Mello
over 6 years ago.

Basically, the smack on the head that makes IE behave is display: block. After that, you can play with whichever margins you want on <hr />.

I am one of those who use the <hr /> tag to split sections. It’s semantically more coherent than dividing by styling the very divs’ borders, it looks better when you view the HTML without CSS, and all that stuff that’s been discussed a lot all around. I came to appreciate <hr />’s usefulness.

What really makes people all over forums pull their hair out is the damn margin that surrounds the <hr /> in IE. IE’s margin is stubborn, indestructible, uncontrollable, unstylable. Wherever I looked for, people gave in to adopting the margins, and more persistent designers even encased the <hr /> into a <div> to get the desired style. In other words, some gave up too easily, some took desperate measures and wouldn’t care to make things right.

One day, I stumbled upon two blog articles which came near to a solution. Neither of them solved the case by itself. But joining both, it worked! Tests confirmed that by mixing both theories I could attain any margin size I wanted, in every browser — even zero. But, in a very unfortunate turn, I never bookmarked such articles, nor have I saved my test files. A very looked-for answer, lost in such a silly way...

This article is about my specific case: I wanted to use <hr /> free from any nonsense divs, and with zero margin — even in IE. And, above all things, this article is all about leaving the answer somewhere safe and under everyone’s reach. Now that I’ve remembered the solution, I won’t lose it again.

“Smack that head”

After I’d lost track of those articles and weeks had passed by, all I could remember was that Internet Explorer needed a smack in the head: a completely unexpected, counter-intuitive attribute that would get it back to its senses. Basically, the smack on the head that makes IE behave is display: block. After that, you can play with whichever margins you want on <hr />.

Who figures. The <hr /> element is already a block. In every way it looks like a block element. Breaks line above, breaks line below, there’s nothing inline on it. And that seems to be why so many forums chase their tails for a solution: few would suspect that it is necessary to remind <hr /> that it’s actually a block. Saying display: block would be plain redundant and unnecessary. But damned IEvil demands it in order to realize “oh well, what do you know, it’s true...”.

Once inserted, I wanted each divider line to have the following features:

Should break any eventual floats;

Should have zero vertical spacing;

Should be invisible.

First task is simple. In our style sheet application.css, we write:

hr {
clear: both;
}

Now comes the second task: cleaning the spaces the line generates on IE. But as said before and so many times on blogs all around, <hr />’s margin on IE is persistent, ruthless, stainless, shameless. People around have tried everything: margin: 0, padding: 0, line-height: 0, font-size: 0, even overflow: hidden. Going margin zero works with standard-compliant browsers, but nothing beats those gaps on IE.

So, in our application.css, let’s guarantee there’s no margin on the smart browsers:

hr {
clear: both;
margin: 0;
}

The explanation for IE’s insistent margins is that IE renders the <hr /> tag with a vertical margin 7px longer than other browsers. In other words, if you write...

hr {
clear: both;
margin: 7px 0;
}

... You get, in a decent browser, the expected:

And on IE, a sum of what you wrote plus its native margins:

“So”, I might think, “I just have to write negative margins for IE”. Would be the intuitive thing to do, but IE isn’t all about intuitiveness. It won’t work: the upper margins goes away, but the lower one never gives in! Check it out:

The ace in the hole

Enter in our application.css the attribute display: block:

hr {
clear: both;
margin: 0;
display: block;
}

This is the last attribute I’d think about to eliminate margins. I can’t explain why it works. It’s counter-intuitive. It’s redundant. It’s idiot. And nevertheless (or perhaps just because of this) it makes IE wake up.

Now we can think about that negative margin subject. Then we just correct application.css:

hr {
clear: both;
margin: -7px 0;
display: block;
}

And voilà! Finally, an <hr /> tag with no margins!

Conditional comment:

Problem with using negative margins is that standard-compliant browsers interpret them just as they are — negative:

Firefox now is okay. But on IE, the gap, instead of disappearing, got reduced to 1px (boy, that’s IE...). That’s because on IE’s <hr /> the borders aren’t defined by the border, but instead by the color (have I mentioned IE isn’t all about intuitiveness?). As one’s color can’t just go “zero” to make the gap go, the way left is to tweak the margins we have on application_ie.css, adding 1px above or below:

hr {
margin: -8px 0 -7px 0;
}

And there you have the final result:

Conclusion

This was my very specific case involving the <hr /> tag. If you are one of those people who pulled your hair out because of IE’s stubborn margins, know that there’s a solution. You don’t need to adapt you precious layout to fit the margins, nor you have to enclose the tag within a <div> only for it. Best practices, now!

I hope I have helped relieve your pain in the neck. Now the answer is right here, for the whole world. Soon you’ll see it in action at Patricia Figueira’s site and at beonthe.net. But if this article doesn’t solve your particular case, write me. Let’s think together of solutions for taming <hr /> — and maybe, just maybe, Internet Explorer itself.

This is a GREAT article, and gave me some awesome pointers. However, I'm still stuck with an annoying visual artifact on my

. In FF-15 it looks perfect; in IE9 and Chrome 24 it seems to have this little "hook" on the left side of the . It almost looks like it's trying to be a really thin input box rather than a And believe it or not, it looks worse in Chrome than it does in IE. FWIW, the consultant who built the site (using a WYSIWYG, darnit) set the DTD to XHTML 1.1. Thoughts?

Glad said over 4 years later:

Awesome! Saved me a lot of time, sweat, and blood! haha! :D

SS said over 4 years later:

Saved me some serious frustration as I struggled to investigate what's adding the margin on IE when it is working perfectly on Firefox.