问题描述：原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ，内层div 并没有出现他所预想的那种效果，实际效果是 maindiv 仍然紧贴内层div 整个maindiv 上边框距离浏览器上边 增加了10px 的外边距”

问题描述代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{margin: 0;padding: 0;}

    .main{

        width: 400px;

        height: 400px;

        background: pink;

    }

    .header1{

        width: 150px;

        height: 150px;

        background-color: red;
        margin-top:10px;

    }

    .header2{

        width: 150px;

        height: 150px;

        background-color: blue;

    }

    </style>

</head>

<body>

<div class="main">

<div class="header1">

</div>

<div class="header2">

</div>

</div>

</body>

</html>

解决方案：

1、在父级加入overflow：hidden；

2、在父级用padding-top

3、在父级加position：absolute；

在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

"margin塌陷现象"div盒子嵌套盒子外边距合并现象的更多相关文章

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

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

  2. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  3. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  4. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  5. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  6. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  7. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  8. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

  9. margin 外边距合并问题

    一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...

随机推荐

  1. java学习之部分笔记2

    1.变量 实例变量和局部变量 实例变量系统会自动初始化为0和null(string),局部变量必须设定初始值. 静态方法里只能引用静态变量 数据类型的自动转换! int—>long 2.构造方法 ...

  2. Android Studio自定义注释模板及生成JavaDoc

    刚开始学习Android,使用了Android Studio IDE.为了将来生产JavaDoc,学习一下如何自定义注释模板. . 自定义注释模板 1. 通过 File –>Settings 或 ...

  3. tablbView中section的间距

    - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section { if (sect ...

  4. ASP.NET，Razor语句中@符号的意义

    比较下面两段代码的区别: <td> @if (item.ModifyTime.HasValue) { @item.ModifyTime.GetValueOrDefault().ToStri ...

  5. hdu2952Counting Sheep

    Problem Description A while ago I had trouble sleeping. I used to lie awake, staring at the ceiling, ...

  6. <转>java中静态方法和非静态方法的存储

    Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...

  7. Linux操作系统报：read-only file system

    在对集群测试过程中发现系统中某一节点中的磁盘变成read-only file system,从而导致测试任务出错,从网上查找资料,找到以下解决方案: 这个报错的意思是硬盘属性变成只读,不可写入: VO ...

  8. http协议说明

    今天公司有同事让我给他讲一讲http..然后自己写了一个示例代码,这如果都看不懂.那我也没办法了.... <?php //这里服务器以apache举例.nginx.iis.他们实际上处理方式的都 ...

  9. 怎么查看mysql执行过的sql。

    有些时候当程序做了更新,数据库负载突然上来,或者并发翻了几倍.这个时候如果用show full processlist; 根本看不到完全的sql.怎么才能看是哪些sql导致的呢,在网上查了资料,有一下 ...

  10. hdu 2966 In case of failure k-d树

    题目链接 给n个点, 求出每个点到离它最近的点的距离. 直接建k-d树然后查询就可以  感觉十分神奇... 明白了算法原理但是感觉代码还不是很懂... #include <bits/stdc++ ...