边框底部和 header 一起移动

Question

在我的导航栏中，我用一些文本和一条水平线分隔我的部分。对于每个部分重复此操作。我这样做如下所示：

.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;
}*/

问题是，我的文字现在几乎卡在了 parent div 的左侧。它应该在左边有一些边距，同时保持底部边框从 0px 开始到左边。当我尝试用 margin-left: 5px; 移动它时，它最终也会移动 border-bottom。我用 ::after 尝试了这个，如评论位所示，将 !important 添加到末尾但没有任何变化。我做错了吗？抱歉，我是 front-end 菜鸟！

编辑： header 部分在 <span> 中，如果它有所不同。

Answer 1

使用 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>

边框底部和 header 一起移动

Border bottom and the header move together

html

css

header

margin

nav