Возникли проблемы с пробелом внутри пользовательской линии HTML

Question

Я пытаюсь создать строку, которая визуально отделяет мой контент для моей веб-страницы. Однако у меня есть эта проблема, которой у меня не было раньше. Это строка на моей странице, которая не прерывается

https://i.stack.imgur.com/wqxx5.png

И эта строка на моей странице имеет те же значения CSS и html (точно так же), но выглядит это так

https://i.stack.imgur.com/bUtTA.png

Как вы можете видеть, разница в странном пространстве между границами, которое я не делаю хочу.

Вот html

<div class="line"></div>

А вот css

.line{
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border:2px solid #bd983d;
    color: #bd983d;
    border-collapse: collapse;
}

Я не смог решить проблему, так как появляется иногда, а потом исчезает Спасибо

Answer 1

Иногда это зависит от содержимого внутри этой строки, а иногда от разрешения пользователя или браузера или даже состояния увеличения. Это сложно, но самое простое решение - просто использовать border-top.

.line{
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid #bd983d;
    color: #bd983d;
    border-collapse: collapse;
}

<div class="line"></div>