Jak usunąć spację na górze znacznika <p> / wyrównać zawarty tekst na górze kontenera?
To bez wątpienia głupie pytanie, ale mam zły dzień i to mnie dezorientuje!
Jeśli widziszhttp://jsfiddle.net/E6kGP/1/ wtedy możesz zobaczyć dwa proste divy obok siebie, z których każdy zawiera tag p, każdy z różnymi rozmiarami czcionek i dopasowanymi wysokościami linii.
Między górną częścią kontenera p a górą zawartego tekstu znajduje się niewielka szczelina, która różni się w zależności od rozmiarów czcionek (i wysokości linii). Oznacza to, że górna część tekstu w każdym p nie jest wyrównana w pionie. Jeśli wysokości linii nie pasowały do rozmiarów czcionek, to mógłbym to zrozumieć, ale z pewnością, jeśli są takie same, wysokości linii powinny odpowiadać najwyższemu znakowi, a zatem najwyższy punkt pierwszej linii powinien być wierzchołkiem p kontener? Oczywiście można to zhakować przy użyciu dopełnienia / marginesów lub bezwzględnego pozycjonowania, ale chciałbym zrozumieć, dlaczego domyślnie to nie działa i jaki jest właściwy sposób ich naprawienia?
Zgodnie z żądaniem SO kod z jsfiddle jest również poniżej:
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>
Bardzo dziękuję wszystkim!