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

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

That one there:

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

Here you go...

Add height: 0px;.

See the snippet below.

hr.separator {
  border: 2px solid red;
  margin-left: 20px;
  margin-right: 20px;
  height: 0px;
}

<hr  />