关于margin穿透的两三事

遇到一个问题：

...
div.outter>div.inner

【问题】

在以上情况中，inner的margin-top会穿透inner，变成outter的margin-top。（margin-left则没有这个情况）

【解决】

outter加一个overflow:auto或hidden。

【引申的问题】

overflow肯定不是一个好的解决方法，在父子框架中需要有一定边距时，最好不要用margin来实现。
正所谓 “同级用margine，父子用padding” 。
换成padding-top来解决会怎么样呢？

【引申的解决】

用padding-top时，所有css样式就都可以写进outter中。
随之而来的问题是如果你的outter是定height的，虽然没有穿透的问题，但是content-box会被撑大。
解决一 ：自己手动把outter的height改成 height减去padding-top的值 ，完美解决。
解决二 ：利用怪异盒子， box-sizing: border-box; ，可以在不修改height成难懂数字的情况下解决，缺点是只支持ie8以上浏览器。