header 标签左侧的随机 space

Question

我有一个 h3 标签，其中包含与下面的内容不正确对齐的文本。它不能是边距或填充，因为它是 h3 本身，它包含它左侧的额外 space 。我已经使用position relative来对齐下面的内容了，但是我想提前了解一下问题是什么is.Thanks！

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; 推动它，但这需要与你所做的任何其他事情一起工作。

header 标签左侧的随机 space

Random space to the left of header tag

css

random

space

header