ヘッダータグの左側にランダムなスペースがあります

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;でこれを微調整することができますが、これは他の作業を行う必要があります。