why is third <p> printed before second<p>

Question

if i set height property for all in css then only order changes, otherwise it prints in correct sequence
https://code.sololearn.com/Wnat0tQun3Yn/?ref=app

Answer 1

https://code.sololearn.com/WZtiB1rj005H/?ref=app
borders are added to visualize the size of elements.
padding are added to visualize the parent-child relationship.
take a look first,
after that, remove height, and take a second look.

Answer 2

Because you set all of the tag height 100px.
So its mean you set div 100px height, and that div containt 2 p tags each 100px so total 200px height p inside 100px height div.
Thats mean 2 <p> tags inside the <div> are higher than the div it self, it cause an offside.
Try to set <div style="height:200px"> , i believe your problem will be solved.
Tips : avoid to use * { } in css it will causes alot of ambigous statement in your css.

Answer 3

Another tips if you wanna keep that code :
Change the height:100px into min-height:100px.
So there willnot be offside of height

Answer 4

thank s Andri Hry

Answer 5

thanks Gordon

Answer 6

it's not a part of any specific program, i am just trying to understand behavior of css elements in different contexts and how they really work