How to remove a place at the top of the <p> tag / align containing text at the top of the container?

Question

This is undoubtedly a stupid question, but I have a bad day, and it baffles me!

If you look at http://jsfiddle.net/E6kGP/1/ , you will see two simple divs next to each other, each containing an ap tag, each with different font sizes and line heights.

There is a small gap between the top of the container p and the top of the contained text, which differs depending on the font size (and line height). This means that the top of the text in each p is not vertically aligned. If the line heights do not match the font sizes, then I could understand that, but, of course, if they are the same, then the line heights should correspond to the highest character, and therefore, the highest point of the first line should be the top p of the container? Obviously this can be hacked using padding / marginins or absolute positioning, but I would like to understand why this does not work by default and how to fix it correctly?

As requested by SO, the code from jsfiddle is also below:

div {float: left; width: 50%;} p {margin:0 0 1em;padding:0;} #left p {line-height:36px;font-size:36px;} #right p {line-height:16px;font-size:16px;} <div id="left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="right"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> 

Thanks, as always, to everyone!

Answer 1

Perhaps to place accented characters, try placing Ä in the first <p> , additional space will help to place an accent. However, I am not 100% convinced that this is the ultimate reason.

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

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

Although provided, this does not solve the why problem.

Answer 2

As ExtPro said, it is designed to accommodate accented characters. Simple job is to have margin-top:-<number>px; so that you manually aligned it.