BoltClock's answer is quite comprehensive. Here, I will provide additional solutions to address this issue.
Refer to w3c_collapsing margin for insights on resolving the problem at hand.
Solution 1
When dealing with margins between a floated box and any other box, it should be noted that they do not collapse, even between a float and its in-flow children.
To implement this solution, adding float:left to either #outer or #inner would suffice. Check out the demo1.
It's important to recognize that using float can impact the usage of auto in margins.
Solution 2
Margins of elements establishing new block formatting contexts, such as floats and elements with 'overflow' aside from 'visible', do not collapse with their in-flow children.
Incorporating overflow: hidden into #outer, except 'visible', seems like a simple and effective method to tackle the problem.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Solution 3
Margins of absolutely positioned boxes do not collapse, not even with their in-flow children.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
Alternatively,
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
Both these approaches disrupt the regular flow of the div.
Solution 4
The behavior of margins of inline-block boxes mirroring Enderskill's observation.
Solution 5
Discussion on the collapsing margins between siblings, where an in-flow block-level element's bottom margin merges with the top margin of its subsequent in-flow block-level sibling unless the latter has clearance.
This aspect may not directly pertain to the initial query but illuminates how the total margin between two elements could be less than combined individual margins due to collapse.
Solution 6
Exploring the scenario where the top margin of an in-flow block element combines with its first in-flow block-level child's top margin if certain conditions are met.
An interesting approach involves introducing a border line to comply with the requirements:
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Given that <div> defaults to being block-level, explicit declaration is usually unnecessary. Apologies for limitations on links and images due to minimal reputation - at least you now have insight when encountering similar issues in the future.