Extra space - where does it come from?

Question

I was fiddling around with this example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientleft_clienttop It looked like the top picture below, having a space between the top border and the text.

I then changed the code to a top border thickness of 0px. Looked like the second picture below. No space now. Hmm. What was the extra space in the top figure? Margins? I then set padding and margins to 0px as well. No change. I then set the top border width to 1px. And now the entire space came back. Like on the bottom picture below.

Can anyone explain that?

Thanks Poul

Answer 1

The p tag automatically creates some space before and after itself. So, for the case of border thickness to 0px So, we are not able to see the top margin here.