Border behaviour div

[nickmaskell]

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)]

I explained this behavior recently in another post. Have a look at my answer there and please ask if something isn’t clear.

Assessment wanted for A cool-looking box, border question

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.

[nickmaskell]

Thanks for your help. Good to know there’s a reason, didn’t realise that p has a default margin.

Nick