多语言展示
当前在线:888今日阅读:23今日分享:25

HTML div嵌套 margin不起作用

本篇主要是 div嵌套时margin不起作用的解决方案。本人新手,用于学习记录,有错误请指出,只有这样才能共同进步,谢谢。顺便科普下margin的定义和用法。
工具/原料
1

WebStorm

2

Chrome浏览器

方法/步骤
1

div嵌套的HTML代码

2

浏览器运行结果

3

有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。解决该问题我们需要先了解ie特有的一个属性haslayout。下图中haslayout解释

4

下图是要实现的效果图解决办法1、让父元素生成一个 block formating context,以下属性可以实现     float: left/right     position: absolute     display: inline-block     overflow: hidden/auto2、给父元素添加border或者padding

5

1.以overflow:hidden方法为例代码如下图

6

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

7

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

推荐信息