Kaleb Meeks Kaleb Meeks - 3 months ago 8
CSS Question

Random space to the left of header tag

I have an h3 tag which hold text inside of it that doesn't align correctly with the content below it. It can't be margin or padding because it is the h3 itself which contains the extra space to the left of it. I have use position relative to align it with the content below it ,but I want to understand what the problem is.Thanks in advance!

enter image description here

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

It's just the font that determines that. Change the font to Times New Roman and the margin is gone. Change the D into a T and there is no spacing anymore. In a font, each letter has some kind of bounding box and some letters have a bigger bounding box than the letter itself.

If you want to remove it, (I would definitely not recommend that, since it is made like this because of the good lookings), you can do it by applying a negative margin-left to the tag. But keep in mind that this can change from device to device and especially between various starting letters. So just don't do it ;-)

See the work around in action here: http://jsbin.com/jexijonuru/edit?html,css,output
Including a reason why it is not a good idea.