How To Remove Space At Top Of Tag / Align Contained Text To Top Of Container?

This is undoubtedly a stupid question but i'm having a bad day and it's confusing me! If you view http://jsfiddle.net/E6kGP/1/ then you can see 2 simple divs next to each other eac

Solution 1:

It might be to accommodate accented characters, try putting Ä into the first <p>, the extra space helps accommodate the accent. That said, I'm not 100% convinced that is the definitive reason.

You can always specifically target the first line of a <p> element to reduce it using:

p::first-line {
    line-height: 0.8em;
}

Though granted, that doesnt solve the 'why' issue.

Solution 2:

Like ExtPro has said, it's to accommodate accented characters. A simple work around is to have margin-top:-<number>px; so that you manually align it.