下面介绍一下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. Laytpl 1.2

    https://jeesite.gitee.io/front/laytpl/index.html

  2. SELinux已经允许，为什么日志显示的仍然是denied？

    从日志可以看到,SELinux的Mode已经修改位了permissive = 1,也就是允许模式,但它前面的日志仍然显示的是“denied".本来我还以为是自己哪里没弄好导致的这个问题,但访 ...

  3. 优化：在k8s上部署的gitlab

    gitlab组件图 gitlab在k8s上占用资源 # kubectl top pods -n default | grep git* gitlab-gitaly-0 9m 444Mi gitlab- ...

  4. 前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...

  5. TP5中的缓存使用

    Thinkphp 5.0采用了 think\Cache 类来提供缓存支持 缓存支持采用驱动方式,所以缓存在使用之前,需要进行连接操作,也就是缓存初始化操作. 支持的缓存类型包括file.memcach ...

  6. java 基本语法（一） 关键字与标识符

    1.java关键字的使用定义:被Java语言赋予了特殊含义,用做专门用途的字符串(单词)特点:关键字中所字母都为小写具体哪些关键字: 2.保留字:现Java版本尚未使用,但以后版本可能会作为关键字使用 ...

  7. 03 flask源码剖析之threading.local和高级

    03 threading.local和高级 目录 03 threading.local和高级 1.python之threading.local 2. 线程唯一标识 3. 自定义threading.lo ...

  8. redis（十一)：Redis 列表(List) （python）

    # -*- coding: utf-8 -*- import redis r =redis.Redis(host="123.156.74.190",port=6379,passwo ...

  9. 【C#】WebService接受跨域请求及返回json数据

    问题概述 通过Web Service发布服务供客户端调用是一种非常简单.方便.快速的手段,并且服务发布后会有一个服务说明页面,直观明了,如图: 一般情况下,在web页面中的JavaScript中调用W ...

  10. 适用于IE8浏览器的bootsarp下拉菜单（支持多选，全选)

    html部分代码,引用及整体项目Github项目地址:https://github.com/CNbozi/combobox 1 <!DOCTYPE html> <html lang= ...