元素顶部空白是否为padding？设置padding:0仍有间距的原因及解决方法

我知道元素的padding是内容与边框之间的空白区域，于是写了这段代码：

<p style="background-color: tomato; border: 1px solid black; padding:0px; ">A paragraph</p>

我设置padding为0px，原本期望文本与边框之间没有空白，但实际结果却和预期相反（文本与边框间仍有明显空白）。我已经确认该空白不是padding导致的，请问出现这个空白的原因是什么？有没有办法消除它？

原因及解决办法 #

原因1：<p>标签的默认外边距（margin） #

浏览器会给<p>标签设置默认的上下margin，这是你看到的空白的主要来源，和padding无关。

原因2：默认行高（line-height） #

文本的默认行高通常大于字体本身的高度，这也会在文本上下和边框之间产生空隙。

消除方法 #

给<p>标签添加以下样式即可解决：

<p style="background-color: tomato; border: 1px solid black; padding:0px; margin: 0; line-height: 1;">A paragraph</p>

• margin: 0;：清除<p>标签的默认外边距
• line-height: 1;：将行高设置为与字体高度一致，消除行高带来的上下空隙

内容的提问来源于stack exchange，提问作者Ninja