¿Cómo reducir el margen predeterminado de la etiqueta hr?

Solución:

Ya lo ha logrado. los hr no tiene margen superior o inferior. Es el p elementos que muestran padding y / o margin. Aquí puedes ver esto en acción:

 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>

Probablemente le iría mucho mejor usando etiquetas semánticas y un poco de CSS. <hr> no son semánticas, no tienen ningún significado y solo actúan sobre el aspecto visual de la página. Esto es lo que propondría usar el etiquetado semántico:

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

Y aquí está el violín.

---

---

Utiliza Nuestro Buscador