下面介绍一下div嵌套div时margin不起作用的解决方案。

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

div嵌套的HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        body{

            width: 100%;

            height: 100%;

            background-color: dodgerblue;

        }

        .box{

            width: 300px;

            height: 300px;

            margin: 30px;

            background-color: gray;

        }

        .box .child{

            width: 200px;

            height: 200px;

            margin: 50px;

            background-color:darkturquoise;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="child">

        </div>

    </div>

</body>

</html>

实际效果：

这其实不是我们想要的效果，先来说下为什么会出现这个问题：

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

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

我们要实现的效果是这样的：

最后我们来说一下解决方法：

1、让父元素生成一个block formating context（块级格式化上下文，可自行百度了解），以下属性可以实现

float: left/right

position: absolute

display: inline-block

overflow: hidden/auto

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

以方法一的overflow:hidden为例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        body{

            width: 100%;

            height: 100%;

            background-color: dodgerblue;

        }

        .box{

            width: 300px;

            height: 300px;

            margin: 30px;

            background-color: gray;

            overflow: hidden;

        }

        .box .child{

            width: 200px;

            height: 200px;

            margin: 50px;

            background-color:darkturquoise;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="child">

        </div>

    </div>

</body>

</html>

最终效果：

HTML中div嵌套div的margin不起作用的更多相关文章

  1. div嵌套引起的margin-top不起作用

    通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...

  2. div嵌套引起的margin-top不起作用（转）

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  3. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  4. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  5. HTML里为什么不能在<p>标签中嵌套<div>标签

    学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...

  6. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  7. ie7中ul不能嵌套div和li平级

    我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow">              ...

  8. html标签被div嵌套页面字体变大的解决办法

    html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...

  9. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

随机推荐

  1. C++ MFC 操作文件夹及属性(新建，删除[包含子文件[夹]]，剪切，复制，重命名)

    源文件:http://pan.baidu.com/s/169HCL 运行mfc缺失的动态连接库:http://pan.baidu.com/s/17pGlT 截图: 不足之处仅供参考,哈哈.

  2. 飞越面试官（二）--JUC

    大家好!我是本号唯一官方指定没头屑的小便--怕屁林. JUC是什么东西?我相信很多经验尚浅的小伙伴部分都会为之一懵,我也是,三个字母都会读,连在一起就不知道在说什么,其实如果把它的全称写出来,“jav ...

  3. 部署Redis Cluster 6.0 集群并开启密码认证 和 Redis-cluster-proxy负载

    部署Redis Cluster集群并开启密码认证 如果只想简单的搭建Redis Cluster,不需要设置密码和公网访问,可以参考官方文档. 节点介绍 Cluster模式推荐最少有6个节点,本次实验搭 ...

  4. C#6.0到C#8.0的新特性

    C#6.0新特性 C#7.0新特性 C#8.0新特性

  5. activiti6基础01-如何数据库操作及相关表

    官网文档:https://www.activiti.org/userguide/#queryAPI 1. Activit的简单源码解读      activiti的官方文档讲解详细很详细,也很范.按着 ...

  6. 数据库基础02-MYSQL的事务

    Mysql的事务 1.基本概念      事务本质是一组SQL操作,事务中的语句要么全部执行成功,或者全部执行失败. 2.如何保证一个事务:四个特性(ACID) 原子性 (Automic)       ...

  7. mysql中给查询结果添加序号

    当我们想为查询结果添加序号的时候可以这样写 SELECT @rowid:=@rowid+1 allid, pan_number, receive_person,time_note, url,unit_ ...

  8. requests接口自动化7-Multi/form-data文件上传形式的post请求：files

    Multi/form-data文件上传形式的post请求:用files传参 fiddler里请求响应内容; 代码: import requests from requests_toolbelt imp ...

  9. Chrome浏览器获取XPATH的方法----通过开发者工具获取

    chrome有自己的开发者工具,可以用这儿来直接获取xpath,都不用担心正确性了. 具体使用步骤如下: 1.在chrome浏览器的右上角有个选择菜单,也就是这个,点一下: 2.在列表最后面有个“更多 ...

  10. flask 源码专题（十一）：LocalStack和Local对象实现栈的管理

    目录 04 LocalStack和Local对象实现栈的管理 1.源码入口 1. flask源码关于local的实现 2. flask源码关于localstack的实现 3. 总结 04 LocalS ...