原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/

垂直外边距合并问题

别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看 出现“bug”)：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>垂直外边距合并</title>

<style>

.top{width:160px; height:50px; background:#ccf;}

.middle{width:160px; background:#cfc;}

.middle .firstChild{margin-top:20px;}

</style>

</head>

<body>

<div class="top"></div>

<div class="middle">

  <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>

  <div class="secondChild"></div>

</div>

</body>

</html>

如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器 则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是
为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上
使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要
border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。

为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。

这里我根据上面的内容直接给出其解决方案：只需要把margin-top改为使用padding-top即可解决，避免了margin的折叠规范。

解决div布局中第一个div的margin-top在浏览器中显示无效果问题。的更多相关文章

  1. Div 浮动到另一个div之上

    转自原文Div 浮动到另一个div之上 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met ...

  2. 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

    /*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...

  3. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  4. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  5. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  6. Umbraco -- 在Visual Studio中新建一个View 如何在Umbraco back office 中显示出来

    在使用Umbraco中的过程中,遇到一个问题. 我在项目中(Visual Studio),添加了一个View---Test.cshtml. 然后进入到该Umbraco项目的back office, 在 ...

  7. 前端JQuery中获取一个div下的多个id值

    获取所有的Id值,方法是通过div.class获取全局的值,然后再提取具体的Id值 方法一:用for循环,因为$("div.class")获取的是一个数组,通过循环读取出数组中的每 ...

  8. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  9. html中设置一个div可编辑文本

    <div contenteditable="true"></div> <!-- outline: none;设置获取焦点没有高亮边框 -->

随机推荐

  1. 射频识别技术漫谈(4)——数据编码【worldsing 笔记】

    前已述及,射频识别技术中的调制方法一般使用调幅(AM),也就是将有用信号调制在载波的幅度上传送出去.这里的"有用信号"指用高低电平表示的数据"0"或" ...

  2. 第一个android程序所遇到问题

    1.工程package的命名空间与activity的命名空间不一致,导致setcontentview找不到layout文件 2.增加Button等控件后,Java.R中id必须在删除现有Java.R文 ...

  3. vs2005升级到vs2010相关问题

    1.项目编译失败,报 Resgen.exe 退出 ,错误代码2 处理方式: http://jingyan.baidu.com/article/90895e0fe80c6064ed6b0b6b.html ...

  4. 简单的谈一下.NET下的AOP

    AOP有着它优良的好处, 从一个层面上去关心一个问题, .NET对此有良好的支持.如果硬生生的看MSDN不理解里面的思想是有掉入深渊的感觉的. 为了理解AOP的机制, 我们从需求开始说起,实现AOP就 ...

  5. js url传值中文乱码之解决之道

    在websphere 中使用的是url=encodeURI(encodeURI(url)); //用了2次encodeURI 测试成功,第一次转换没有尝试, 处理方法一. js 程序代码:url=en ...

  6. Remove “System Program Problem Detected” Messages From Ubuntu

    One of my Ubuntu systems would pop up the following message multiple times after logging in: System ...

  7. JavaScript正则表达式快速判断技巧

    这里是JS的正则的一点心得,并不是最完整的规则汇总,更侧重实际运用中的快速判断,初学者接触正则之后往往会被一堆星号括号给弄晕,有了一些速判技巧就能从整体上把握从而不慌乱. JS正则快速判断技巧的核心就 ...

  8. PHP str_replace() 函数

    定义和用法 str_replace() 函数使用一个字符串替换字符串中的另一些字符. 语法 str_replace(find,replace,string,count) 参数 描述 find 必需.规 ...

  9. 解决Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be executed.

    遇到问题描述: 运行android程序控制台输出 [2012-07-18 16:18:26 - ] The connection to adb is down, and a severe error ...

  10. iOS开发——面试笔试精华（二）

    面试笔试精华(二) 警告:一定要把英文题目过一遍,有些公司的题目故意弄成英文的!!! 1.        Difference between shallow copy and deep copy? ...