Why isn't the background applied to child element's margin?

user_923081 0
Viewed 39

<div style="background-color: #666">
    <div style="margin: 20px">Some Content - no border</div>
</div>

However, if I add a border, background color is applied to the whole content including child element's margin:

<div style="background-color: #666; border: 1px solid">
    <div style="margin: 20px">Some Content - has border</div>
</div>

What's the reason for this behavior? What's the specification explains this?

css html
1 Answers

Since the parent Div is Empty, and the Child should have a distance to the border of the parent element, no background is shown in the margin. If you use Padding or a Border, you extend the area of the Child element to that border.

user_171910420
Related