额外空间——它从何而来？

Question

我在摆弄这个例子 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientleft_clienttop 它看起来像下面的顶部图片，在顶部边框和文本之间有一个空格。

然后我将代码更改为 0 像素的顶部边框厚度。看起来像下面的第二张图片。 现在没有空间了。唔。上图中的多余空间是什么？边距？然后我也将填充和边距设置为 0px。不用找了。 然后我将顶部边框宽度设置为 1px。而现在整个空间又回来了。如下图所示。

谁能解释一下？

谢谢 波尔

Answer 1

p 标签会自动在其前后创建一些空格。所以，对于边框粗细为0px的情况 所以，我们在这里看不到上边距。