HTML: how to remove the space inside the
element

Question

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:

https://stackoverflow.com/questions/4151743/how-can-i-change-the-thickness-of-my-hr-tag — vee, Sep 06 '22 at 15:25

score 1 · Accepted Answer · answered Sep 06 '22 at 15:27

1

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

answered Sep 06 '22 at 15:27

A Haworth

30,908
4
11
14

That seems to be the best solution for what I'm trying to achieve – Sep 06 '22 at 15:34
1

The problem with this quick fix is that, if you have multiple hr elements, they can look slightly different height depending on where they fall on the screen. It can be more reliable to get rid of say the bottom border and leave out the background color. – A Haworth Sep 06 '22 at 15:48

Vijay Hardaha · Answer 2 · 2022-09-06T15:23:31.307

0

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

edited Sep 06 '22 at 15:23

answered Sep 06 '22 at 15:18

Vijay Hardaha

2,411
1
7
16

That doesn't solve my problem, I want to remove the space *inside* the
element, not around – Sep 06 '22 at 15:19
Please check the edit I've made to the question, that still doesn't solve my problem :( – Sep 06 '22 at 15:24
1

Sorry, I am unable to see any space inside the hr tag. https://snipboard.io/epkyCB.jpg It's better you set height: auto or in pixel, then use background color, instead of using border. – Vijay Hardaha Sep 06 '22 at 15:27

score 0 · Answer 3 · answered Sep 06 '22 at 15:25

0

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

answered Sep 06 '22 at 15:25

mdurchholz

523
1
4
16

HTML: how to remove the space inside the element

3 Answers3

HTML: how to remove the space inside the
element