Случайное пространство слева от тега заголовка

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;, но это должно работать с чем бы вы ни занимались.