标题标记

Question

我有一个h3标签，其中包含与其下方内容无法正确对齐的文本。它不能是边距或填充，因为它是h3本身，它包含左边的额外空间。我使用位置相对于它与下面的内容对齐，但我想了解问题是什么。提前谢谢！

HTML：

    <div class="details_section">
      <h3>Details</h3>
      <p class="bold">Name:</p>
      <p>Kaleb Meeks</p>
      <p class="bold">Age:</p>
      <p>19</p>
      <p class="bold">Location:</p>
      <p>Mississippi,United States</p>
     </div>

CSS：

 .details_section {
   width:100%;
   height: 100%;
   padding-left:5%;
   margin-top:7%;
 }

 .details_section h3 {
   font-size:28px;
   color:#005689;
   font-weight:normal;
  }

  .details_section p {
    display:block;
    font-size:14px;
    color:#000;
  }

Answer 1

这只是决定它的字体。将字体更改为Times New Roman，边距消失。将D更改为T并且不再有间距。在字体中，每个字母都有某种边界框，有些字母的边界框比字母本身更大。

如果你想删除它，（我绝对不会建议，因为它的外观很好，所以你可以通过对标记应用否定margin-left来实现。但请记住，这可能会因设备而异，特别是在各种起始字母之间。所以就是不要这样做; - ）

请参阅此处的工作：http://jsbin.com/jexijonuru/edit?html,css,output
包括为什么它不是一个好主意的原因。

Answer 2

您可以使用position:relative; right:2px;轻推这一点，但这需要与您正在做的其他事情一起使用。