Как уменьшить по умолчанию маржу hr-тега?

Question

Я могу увеличить по умолчанию маржу hr. Но я не могу уменьшить маржу hr до нуля. Все, что мне нужно, это просто горизонтальная линия с нулевым верхним и нижним краем

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

Смотри также this jsfiddle.

Answer 1

Вы уже успели. hr не имеет края сверху или снизу. Это элементы p, которые показывают padding и/или margin. Здесь вы можете увидеть это в действии:

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>

Answer 2

Вы, вероятно, будете делать гораздо лучше с помощью семантических тегов и немного CSS. <hr> не являются семантическими, они не имеют никакого значения и просто действуют на визуальный аспект страницы. Вот что я хотел бы предложить, используя семантическое пометку

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 */ 
} 

И here's the fiddle.

Answer 3

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>