边距顶部无法正常工作

【问题标题】：margin-top does not work properly边距顶部无法正常工作
【发布时间】：2014-03-23 17:23:16
【问题描述】：

我只是找不到这个脚本的问题：http://jsfiddle.net/AKB3d/

#second {
  margin-top:50px;
  ...
}

我希望黄色框在右框顶部边框下方 50 像素处，但每当我添加 margin-top 到黄色框，红色框也下降了。为什么？

【问题讨论】：

标签： html css

【解决方案1】：

给父div一个overflow:hidden，即#first

【讨论】：

折叠边距也可以通过红色框上的边框或内边距触发，因此将其保留在内部。提醒一下 :) jsfiddle.net/AKB3d/3 和 background-clip 的边框不要太乱jsfiddle.net/AKB3d/4
@GCyrillus 谢谢..这是非常有用的信息.. :)

【解决方案2】：

查看Working fiddle

#first {
margin:auto;
width:100px;
height:100px;
background:red;
overflow:hidden;
}

【讨论】：