Дно границы и заголовок движутся вместе - PullRequest
Новая
       77

Дно границы и заголовок движутся вместе

0 голосов
/ 20 марта 2020

В моей навигации я разделяю свой раздел текстом и горизонтальной линией. Для каждого раздела это повторяется. Я делаю это, как показано ниже: 

.navSectionHeader {
  font-size: 1em;
  color: #fff;
  margin-left: 5px;
  margin-bottom: 10px;
  font-family: "Roboto";
  font-weight: 700 !important;
  border-bottom: 2px solid #6c6c6c;
}

/*.navSectionHeader::after {
    content: ' ';
    display: block;
    border: 2px solid;
    border-color: #6c6c6c;
    margin-left: 0px !important;
}*/

Проблема в том, что мой текст теперь в значительной степени застрял слева от родительского div. Это должно быть с некоторым запасом слева, при этом нижняя граница должна начинаться с 0px влево. Когда я пытаюсь переместить его с помощью margin-left: 5px;, он также перемещает border-bottom. Я попробовал это с ::after, как показано в комментируемом бите, добавив !important в конец, но ничего не изменилось. Я делаю это неправильно? Извините, я передовая нуб!

Редактировать: Заголовок раздела находится в <span>, если это имеет значение.

Without margin

With margin

1 Ответ

3 голосов
/ 20 марта 2020

Используйте padding вместо margin. 

.navSectionHeader {
   padding-left: 5px;
}

Пример, чтобы увидеть разницу, 

div {
   display: inline-block;
   width: 100px;
   height: 20px;
   border-bottom: 1px solid black;
   background: red;
   color: white;
}

.padding { 
   padding-left: 5px;
}

.margin { 
   margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
...