html - 边框底部和标题一起移动

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

问题是，我的文本现在几乎粘在父 div 的左侧。它应该在左边有一些边距，同时保持底部边框从左边 0px 开始。当我尝试移动它时，margin-left: 5px;它最终border-bottom也会移动。我尝试了这个，::after如注释中所示，添加!important到最后但没有任何变化。我这样做是错误的吗？对不起，我是前端菜鸟！

编辑：<span>如果它有所作为，则部分标题位于 a 中。

标签： htmlcssheadermarginnav

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>