Why is
still visible when its height is 0%

Question

I have the following code. I don't understand why the p element is still visible when the height is 0%. Please explain, thanks!

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

<p>I am Ozi</p>

Possible [answer](https://stackoverflow.com/a/1622097/2635367) "To set a percentage height, its parent element(*) must have an explicit height." The parent of p need a specific height. Also needs overflow hiidden. — Serafín, Aug 01 '19 at 09:54
@TemaniAfif I want you to know, as you've closed this question, I searched thoroughly and couldn't find the said duplicate question. The title is not self explanatory. That's why i asked this new one. — Ozichukwu, Aug 01 '19 at 10:09
and that's why we are here to close question as duplicate, no one is blaming you for asking the question. — Temani Afif, Aug 01 '19 at 10:11

score 1 · Answer 1 · answered Aug 01 '19 at 09:57

1

Dont include percentage in height. Just specify 0 and it works.

p {
  height: 0;
  overflow: hidden;
}

<p>I am Ozi</p>

answered Aug 01 '19 at 09:57

Allan Jebaraj

score 1 · Answer 2 · answered Aug 01 '19 at 09:58

1

SOLUTION:

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

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

answered Aug 01 '19 at 09:58

Naveen Kumar V

2 Answers2