Hi, I had a strange occurance when adding a border rule to the div element, the top and bottom (undefined 1em) margin of the child p element are included within the box, elongating it vertically. I don’t know why this occured, would be good to know if someone can help.
Thanks
code;
https://jsfiddle.net/nickm49/h2m6re9a/10/
box test;
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box
mikoMK
(Michael Koch)
September 24, 2022, 2:51pm
2
I explained this behavior recently in another post. Have a look at my answer there and please ask if something isn’t clear.
Regarding the changing height with/without border:
The reason for this seemingly strange behavior is caused by “margin collapsing”. Under certain circumstances the margins of parent and child elements are collapsed and the bigger one of them is used outside the parent element. But there are situations where this will not happen for example when the parent has a border or text before the child. In this case the margin will be inside the parent.
Since <p> has a default margin-top and margin-bott…
Michael
PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.
Thanks for your help. Good to know there’s a reason, didn’t realise that p has a default margin.
Nick
1 Like