HTML div嵌套 margin不起作用

HTML div嵌套 margin不起作用

本篇主要是 div嵌套时margin不起作用的解决方案。

本人新手，用于学习记录，有错误请指出，只有这样才能共同进步，谢谢。

顺便科普下margin的定义和用法。

div嵌套的HTML代码

浏览器运行结果

有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

解决该问题我们需要先了解ie特有的一个属性haslayout。

下图中haslayout解释

下图是要实现的效果图

解决办法

1、让父元素生成一个 block formating context，以下属性可以实现 float: left/right position: absolute display: inline-block overflow: hidden/auto

2、给父元素添加border或者padding

1.以overflow：hidden方法为例

代码如下图

以上方法逐一实验，均可实现下图效果

以上是本篇记录的全部内容，end