HTML div嵌套 margin不起作用

 时间:2026-04-23 17:28:17

1、div嵌套的HTML代码

HTML div嵌套 margin不起作用

2、浏览器运行结果

HTML div嵌套 margin不起作用

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

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

下图中haslayout解释

HTML div嵌套 margin不起作用

4、下图是要实现的效果图

解决办法

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

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

HTML div嵌套 margin不起作用

5、1.以overflow:hidden方法为例

代码如下图

HTML div嵌套 margin不起作用

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

HTML div嵌套 margin不起作用

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

  • ubuntu 怎么查看一个文件的详细信息
  • textarea对象如何使用rows属性?
  • C++创建一个CPU类
  • 光电毕业生容易就业吗
  • 各个版本的word如何进行统计字数
  • 热门搜索
    关于禁毒的手抄报 植树节手抄报一等奖 文明校园手抄报内容 关于秋天的手抄报 三八妇女节手抄报简单 亲子手抄报 关于梦想的手抄报 英语手抄报图片简单又漂亮 环保手抄报内容资料 爱家乡手抄报