+ 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
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.
+ 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.
+ 2
Another tips if you wanna keep that code :
Change the height:100px into min-height:100px.
So there willnot be offside of height
+ 1
thank s Andri Hry
+ 1
thanks Gordon
+ 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