如何删除< p>顶部的空格标签/对齐包含文本到容器的顶部？ [英] How to remove space at top of <p> tag / align contained text to top of container?

问题描述

这无疑是一个愚蠢的问题，但我有一个糟糕的一天，它让我困惑。

如果你看到 http://jsfiddle.net/E6kGP/1/ 然后你可以看到2个简单的div，每个都包含ap标签，每个都有不同的字体大小和匹配的行高。

p容器的顶部和包含文本的顶部之间有一个小间隙，这取决于字体大小（和线高度）。这意味着每个p中的文本的顶部不是垂直对齐的。如果行高不匹配字体大小，那么我可以理解这一点，但肯定如果他们是相同的，那么行高度应该匹配最高的字符，因此第一行的最高点应该是顶部的p容器？显然，这可以使用填充/边距或绝对定位黑客，但我想知道为什么这不工作默认情况下，正确的方法是修复它？

根据SO的请求，jsfiddle的代码也在下面：

  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。除非另有规定，否则不在意，不可抗力。 
< / 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。除非另有规定，否则不在意，不可抗力。 
< / p> 
< / div> 
  

非常感谢所有人！

解决方案

它可能适应重音字符，尝试将Ä插入第一个< p> 。

您可以始终专门定位< p>的第一行; 元素来减少它使用：

  p ::第一行{
高：0.8em; 
} 
  

虽然被授予，

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 each of which contains a p tag each with different font sizes and matching line-heights.

There is a small gap between the top of the p container and the top of the contained text which is different depending on the font sizes (and line-heights). This means that the top of the text in each p is not vertically aligned. If the line-heights didn't match the font-sizes then I could understand this but surely if they are the same then the line-heights should match the tallest character and hence the highest point of the first line should be the top of the p container? Obviously this can be hacked using padding/margins or absolute positioning but i would like to understand why this doesn't work by default and what the correct way is to fix it?

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 very much as ever everyone!

解决方案

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.

这篇关于如何删除< p>顶部的空格标签/对齐包含文本到容器的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！