2

<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?

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
elmar
  • 41
  • 1
  • 6
  • 1
    Does this answer your question? ['border' makes 'background-color' works different](https://stackoverflow.com/questions/66821527/border-makes-background-color-works-different) – nullptr Jul 15 '22 at 08:55
  • Thans @nullptr. Yes, that's what I wanted. – elmar Jul 15 '22 at 12:22

1 Answers1

0

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.

Voidy
  • 424
  • 3
  • 12