塌陷问题


当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。

①垂直并列(少见)

    首先设置两个DIV,并为其制定宽高
  1.  /*HTML部分*/
    <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    </body>
    /*CSS部分*/
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    .box1{
    width: 200px;
    height: 200px;
    background: yellowgreen;
    }
    .box2{
    width: 200px;
    height: 200px; background: gray;
    }
    </style>
          
     
     对box1我们为其设置margin-bottom:50px;
     对box2我们为其设置margin-top: 40px;
  1.  <style>
    *{
    margin:0;
    padding:0;
    }
    .box1{
    width:200px;
    height:200px;
    background: yellowgreen;
    margin-bottom: 50px;
    }
    .box2{
    width:200px;
    height:200px;
    background: gray;
    margin-top: 40px;
    }
    </style>
      我们肯定会很理所当然的认定这两个盒子之间的距离为90px,事实上并非如此.
     如下图所示:
          
     两盒子之间的距离仅是50px,也就是说两盒子之间的margin出现了重叠部分,故而我们可以得出:垂直之间塌陷的原则是以两盒子最大的外边距为准。
 

②嵌套关系(常见)

  1.  /*CSS部分*/
    <style>
    .box1{
    width:400px;
    height:400px;
    background: pink;
    }
    .box2{
    width:200px;
    height:200px;
    background: lightblue;
    }
    </style>
    /*HTML部分*/
    <body>
    <divclass="box1">
    <divclass="box2"></div>
    </div>
    </body>
     如图示
 
         
    当为子盒子添加margin-top:10px;时会发生如下情况:
          
    子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。
 
解决方法:
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值。

margin-塌陷问题的更多相关文章

  1. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  2. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  3. margin塌陷与margin合并(margin),清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  4. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  5. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  6. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

  7. margin的两个有趣现象:margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  8. margin塌陷

    我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...

  9. 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  10. css margin塌陷问题

    一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...

随机推荐

  1. Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

    上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android ...

  2. android离线缓存技术

    离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻.知乎等等)都是支持离线缓存的,这样带来 ...

  3. Java语言实现二分法

    二分法是一个简单,高效,并广泛应用的查找方法 import java.util.arrays; public class BinarySearch { public static int rank(i ...

  4. [Zabbix3.0 ]添加Nginx监控

    通过Nginx的http_stub_status_module模块提供的状态信息来监控,所以在Agent端需要配置Nginx状态获取的脚本,和添加key信息等,然后在Server端配置Nginx的监控 ...

  5. linux 下使用 tc 模拟网络延迟和丢包

    1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...

  6. onload="fixImage(this, 200, 200)"

    function fixImage(img, w, h) { var newImg = new Image(); //获得图片的原始尺寸 newImg.src = img.src; var lh; / ...

  7. Struts2数据传输的背后机制:ValueStack(值栈)

    1.     数据传输背后机制:ValueStack(值栈) 在这一切的背后,是因为有了ValueStack(值栈)! ValueStack基础:OGNL 要了解ValueStack,必须先理解OGN ...

  8. 【转载】tomcat+nginx+redis实现均衡负载、session共享(一)

    http://www.cnblogs.com/zhrxidian/p/5432886.html 在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一 ...

  9. C 四则运算表达式解析器

    下载实例:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1074 程序主要包括:基础结构定义.词法分析.语法分 ...

  10. Python2和Python3的差异

    之前做Spark大数据分析的时候,考虑要做Python的版本升级,对于Python2和Python3的差异做了一个调研,主要对于语法和第三方工具包支持程度进行了比较. 基本语法差异 核心类差异 Pyt ...