内层div设置margin-top无效的原因及解决方法

现象:内层div设置margin-top没有效果,实际上已经产生了影响,但效果表现在其父层div上。

原因:根据W3C盒子模型的规范,一个盒子(box)如果没有上边距(padding-top)或上边框(border-top),这个盒子的上边距会和其内部普通文档流中的子元素的上边距重叠(即垂直方向外边距合并)。

解决方法:
①给父层div设置内边距或边框属性,如:”padding-top”或”border-top”;
②给父层div添加样式:”overflow: hidden”;
③给内层div添加浮动属性,如:”float: left”;
④给父层div添加相对定位(position: relative),内层div添加绝对定位(position: absolute)。

此条目发表在CSS分类目录,贴了, , , , , 标签。将固定链接加入收藏夹。

发表回复