How to reduce default margin of hr tag?

You probably would do much better using semantic tagging and a bit of CSS. <hr> are not semantic, they don't carry any meaning and just act on visual aspect of the page. Here's what I would propose using semantic tagging :

HTML

<h1>This is header</h1>
<p>This is content. I just want to reduce the margin of hr tag</p>

CSS

h1 {
    border-bottom: 1px solid #ccc; /* This is the line replacing the hr*/
    margin-bottom: 10px; /* This is the space below the line */
    padding-bottom: 15px; /* This is the space between the heading text and the line */
}

And here's the fiddle.

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>