为什么<p>的高度为0％时仍然可见

Question

我有以下代码。我不明白为什么当高度为0％时p元素仍然可见。请解释，谢谢！

p {
  height: 0%;
  overflow: hidden;
}

<p>I am Ozi</p>

Answer 1

height中不包含百分比。只需指定0即可。

p {
  height: 0;
  overflow: hidden;
}

<p>I am Ozi</p>

Answer 2

解决方案：

p {
 display: block;
 line-height:0;
 height: 0px;
 overflow: hidden;
}

<p> hi </p>
<div>
Hi is not displayed
</div>