+ 2

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

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

20th May 2019, 9:17 AM
Nidhi
6 Réponses
+ 2
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.
20th May 2019, 11:01 AM
Gordon
Gordon - avatar
+ 3
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.
20th May 2019, 10:13 AM
Andri Hry
Andri Hry - avatar
+ 2
Another tips if you wanna keep that code : Change the height:100px into min-height:100px. So there willnot be offside of height
20th May 2019, 11:07 AM
Andri Hry
Andri Hry - avatar
+ 1
thank s Andri Hry
20th May 2019, 11:06 AM
Nidhi
+ 1
thanks Gordon
20th May 2019, 11:06 AM
Nidhi
+ 1
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
20th May 2019, 11:17 AM
Nidhi