下面介绍一下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. js写一个简单的日历

    思路:先写一个结构和样式,然后写本月的时间,之后计算上下月份的关系 <!DOCTYPE html> <html lang="en"> <head> ...

  2. 联通BSS-ESS-CBSS系统安装相关

    前言 1. 版本信息 版本 日期 记录 1.0 2016.08.15 初始版本 2. 作者信息 信息 内容 部门 夷陵区分公司 作者 Z.J.T 邮箱 coralfoxzjt@163.com 必须操作 ...

  3. Kafka 可视化监控和管理 UI工具评估

    以下内容,来自网络资料整理和个人安装使用结果.后续会持续更新

  4. HTB::Postman

    实验环境 渗透过程 0x01 信息搜集 masscan扫描 扫描结果目标服务开放了22(ssh),80(http),6379(redis),10000(webmin)端口 nmap扫描 nmap -s ...

  5. Java String：字符串常量池(转）

    作为最基础的引用数据类型,Java 设计者为 String 提供了字符串常量池以提高其性能,那么字符串常量池的具体原理是什么? 字符串常量池的设计思想是什么? 字符串常量池在哪里? 如何操作字符串常量 ...

  6. 数据可视化之powerBI基础（十八）Power BI度量值的格式如何修改？这里有三种方式

    https://zhuanlan.zhihu.com/p/99818030 ​在知识星球遇到的问题中,有不少朋友问如何修改数值型度量值的格式,比如,新建的度量值如何显示为百分比或者千分位等等,这篇文章 ...

  7. 数据可视化之DAX篇（二十一）连接表的几个DAX函数，一次全掌握

    https://zhuanlan.zhihu.com/p/67015995 编写DAX代码进行业务分析时,经常会用到表与表之间的连接计算,比如在之前的产品关联分析一文中(如何用Power BI分析产品 ...

  8. python之爬虫（九）PyQuery库的使用

    PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严 ...

  9. 图文详解在Windows系统中安装JDK

    本文以在Windows10中安装JDK8为例进行安装,其他系统和版本都是大同小异的. 下载 进入Oracle官方网站的下载页面:https://www.oracle.com/technetwork/j ...

  10. redis的集群化方案

    关于 目前有三种 (1)Twitter开发的twemproxy (2)豌豆荚开发的codis (3)redis官方的redis-cluster Twemproxy 架构简单 就是用proxy对后端re ...