How to reduce default margin of hr tag?

Question

I can increase the default margin of a hr tag. But I can't reduce the margin of hr to zero. All I need is just horizontal line with zero top and bottom margin

<p>This is header</p>
<hr class="divider" />
<p>This is content. I just want to reduce the margin of hr tag</p>

hr.divider
{ 
   margin-top: 0em;
   margin-bottom: 0em;
   border-width: 2px;
} 

See also this jsfiddle.

Answer 1

You've already succeeded. The hr has no margin top or bottom. It's the p elements that show padding and/or margin. Here you can see this in action:

 hr.divider { 
  margin: 0em;
  border-width: 2px;
} 

p {
  margin: 0;
  padding: 0; 
}

<p>This is header</p>
<hr class="divider" />
<p>This is content. I just want to reduce the margin of hr tag to zero</p>