原味来源: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. 转载ASP.NET 状态管理Application,Session,Cookie和ViewState用法

    转载原地址 http://www.cnblogs.com/cuishao1985/archive/2009/09/24/1573403.html ASP.NET状态管理 APPlication,Ses ...

  2. ST-Link STVP Cannot communicate with the device!

    用STLink在ST Visual Programmer中对STM8下载二进制文件有时会出现: 原因:多半是STM8目标板没有电源有问题,或是电源引脚虚焊:

  3. PHP魔术变量总结

    php手册里面的解释 __FUNCTION__   returns only the name of the function   返回的仅仅是函数的名称 __METHOD__   returns t ...

  4. 消息队列数量统计(MSMQ,Performance Counter)

    微软消息队列服务MSMQ (Microsoft Message Queue),工作在在线或者离线场景,并提供异步编程功能.互联网和企业开发很多场景应用,例如电商的订单处理流程,这是因为客户端不需要等待 ...

  5. RStudio:R语言编辑器

    RStudio:R语言编辑器 四窗口 左上:写代码,运行的方式是ctrl+Enter,或者用Run按钮 10 + 15 ## [1] 25 左下:终端,上面窗口的代码运行后会在这里显示,也可以直接在这 ...

  6. 了解CSS/CSS3原生变量var

    一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...

  7. iOS与HTML5交互方法总结（转）

    今天小编在找技术文章的时候,发现这样一个标题:iOS与HTML5交互方法总结,怎么看着这么熟悉呢?   还以为是刚哥用了别的文章,点进去一看,原来是刚哥自己写的文章,他们转载的,而且还上了Dev St ...

  8. ORM之二：核心接口与扩展操作

    一.数据库提供者接口 /// <summary> /// 数据库提供者 /// </summary> public interface IDbProvider : IDispo ...

  9. paip.mysql备份慢的解决

    paip.mysql备份慢的解决.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/att ...

  10. 如何把 excel 设为文本格式？

    选择要设置的单元格,右键选择 --- “设置单元格格式” --- 选 “ 分类 ” 下面的 “ 文本 ” --- 确定. 修改前: 修改后: