перерыв линии <hr> не отображается как ожидалось

Question

Любая идея, почему есть тонкая серая линия над моим зеленым

---

и как избавиться от нее?

Благодаря

https://jsfiddle.net/Lc7gym88/

hr { 
    border-bottom: 4px solid #469551; 
    width: 30%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0px !important; 
    height: 0; 
} 

Answer 1

Заменить это:

border-bottom: 4px solid #469551; 

этим:

border: 4px solid #469551; 

Here is the JSFiddle demo

Answer 2

Это потому, что <hr/> имеет границу (по крайней мере в FireFox, поскольку <hr/> имеет браузер зависимый стиль).

Удалить границу сперва.

hr { 
 
    border: none; 
 
    border-bottom: 4px solid #469551; 
 
    width: 30%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 0px !important; 
 
    height: 0; 
 
} 
 
body { 
 
    background-color: black; 
 
}

<br/> 
 
<hr/>

Answer 3

Удалены по умолчанию <hr> границы и использует высоту и фон

hr { 
    background: #469551; 
    width: 30%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0px !important; 
    height: 4px; 
    border:none; 
} 

Пример: https://jsfiddle.net/Lc7gym88/1/

Answer 4

по умолчанию тега <hr> с границей, так что вам нужна первая граница нуля. а затем добавить проверку высоты мой demo