Inner divs padding affects outer div positioning. (margin collapsing?)

I have the following HTML: ``` <p>messy</p> <div class="row"> <div class="cell"> <div class="one wrapper">1</div> </div> <div class="cell"> <div class="two wrapper">2</div> </div> <div class="cell"> <div class="three wrapper"> <div class="foo">3</div> </div> </div> </div> <p>good</p> <div class="row"> <div class="cell"> <div class="one wrapper">1</div> </div> <div class="cell"> <div class="two wrapper">2</div> </div> <div class="cell"> <div class="three wrapper">3</div> </div> </div> ``` With this CSS: ``` .row { display: table; table-layout: fixed; overflow: hidden; background-color:blue; width:100%; } .cell { display: table-cell; overflow: hidden; padding: 0; } .wrapper { overflow: hidden; position: relative; padding:0; display: block; height:42px; background-color:red; } .one { width:100px; } .two { width:40px; } .three { width:100px; } .foo { padding: 10px; } ``` You can see the fiddle here. Why is `three` messing up the layout in case a child has a padding? I've read various articles about margin collapsing in the past, but I could'nt fix this layout using one of the techniques.