HTML: how to remove the space inside the <hr> element

SusLarry 0
Viewed 55

Is there a way to remove the space inside <hr> element? It seems a really simple and dumb problem, but I can't find the answer anywhere.

hr.separator {
  border: 2px solid red;
  margin-left: 20px;
  margin-right: 20px;
}
<hr class="separator"/>

That one there: enter image description here

css html
3 Answers

You'll probably find that the 'gap' comes and goes if you zoom in gradually.

The system sometimes has a problem deciding exactly how to map CSS pixels to screen pixels (several screen pixels make up one CSS pixel on modern screens).

A quick fix is to set the background color also to red.

hr.separator {
  border: 2px solid red;
  margin-left: 20px;
  margin-right: 20px;
  background: red;
}
<hr class="separator"/>

A Haworth0

Set the top & bottom margin to 0;

body {
  margin: 0;
  padding: 0
}

hr.separator {
  border: 2px solid red;
  margin: 0;
  margin-left: 20px;
  margin-right: 20px;
}
<hr class="separator" />

Vijay Hardaha0

You could try using "border-top" rather than border along with making sure your font size and line-height are set to 0:

hr.separator {
  border: 0;
  border-top: 2px solid red;
  margin: 0 20px;
  font-size: 0;
  line-height: 0;
}
mdurchholz0
Related