Dies ist zweifellos eine dumme Frage, aber ich habe einen schlechten Tag und es verwirrt mich!

Wenn Sie anzeigenhttp://jsfiddle.net/E6kGP/1/ Dann sehen Sie 2 einfache Divs nebeneinander, von denen jedes ein p-Tag mit unterschiedlichen Schriftgrößen und übereinstimmenden Zeilenhöhen enthält.

Zwischen dem oberen Rand des p-Containers und dem oberen Rand des enthaltenen Texts befindet sich eine kleine Lücke, die je nach Schriftgröße (und Zeilenhöhe) unterschiedlich ist. Dies bedeutet, dass der obere Rand des Texts in jedem p nicht vertikal ausgerichtet ist. Wenn die Zeilenhöhen nicht mit den Schriftgrößen übereinstimmen, könnte ich das verstehen, aber wenn sie gleich sind, sollten die Zeilenhöhen mit dem höchsten Zeichen übereinstimmen und daher sollte der höchste Punkt der ersten Zeile der obere Rand der sein p Behälter? Natürlich kann dies durch Auffüllen / Ränder oder absolute Positionierung gehackt werden, aber ich möchte verstehen, warum dies standardmäßig nicht funktioniert und wie man es richtig behebt.

Wie von SO angefordert, ist der Code von jsfiddle auch unten:

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>

Vielen Dank wie immer an alle!