CODEWITHSUNDEEP
htmlcss
user19855070
user19855070

Reputation:

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

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

Upvotes: 0

Views: 118

Answers (3)

A Haworth
A Haworth

Reputation: 36457

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

Upvotes: 1

mdurchholz
mdurchholz

Reputation: 523

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

Upvotes: 0

Vijay Hardaha
Vijay Hardaha

Reputation: 2584

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

Upvotes: 0

Related Questions