Experimenting with vertical margin collapse within nested divs? Make sure to include the overflow property (any value except visible will suffice) to resolve this issue.
.container {
background:#ff0000 url(http://example.com/images/bottom.png) left bottom no-repeat;
padding-top:1px;
overflow:hidden;
}
The red color was simply added for testing purposes and can be removed if necessary.
Detailed explanation
Your container div features a yellow strip at its left bottom corner.
The inner div has a 10px bottom margin, which causes it to collapse with the outer div due to lack of content in between.
To avoid this, you could add a bottom padding or border to the outer div, but this might alter your design intentions.
That's why I recommended using the overflow property, which prevents vertical margin collapse without interfering with your design.
In this example, I included a left margin on the inner div and a red background on the outer div.
For educational purposes, I also gave the inner div a transparent background.
Preventing Vertical Margin Collapse
Using overflow:hidden
Try removing the overflow property and observe the vertical margins collapsing.
I hope this clarification is helpful to you.
Wishing you a productive day filled with enjoyable coding :-)