html - 如何在分区类中使用边距，使其不影响外部分区类

Question

<div  class="header">
    <div class="menu"></div>
</div>

当我在内部 div class="menu" 上应用 margin-top 时，它会影响外部 div，这意味着外部 div 移动了与内部相同的边距 margin 。

建议我如何处理这个问题。我想从外部标题 div class="menu"

获得 margin-top

Answer 1

还有很多方法可以避免折叠边框，例如可以使用padding

.header {padding-top: 20px;}

http://jsfiddle.net/fqk9w9u9/

或者 .header 上的 margin 和 overflow: hidden on parent.

.header {overflow: hidden;}
.menu {margin-top: 20px;}

http://jsfiddle.net/fqk9w9u9/1/

或者 .menu 的边距和父级的填充的组合。

.header {padding-top: 1px;}
.menu {margin-top: 19px;}

http://jsfiddle.net/fqk9w9u9/3/