原味来源: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. 如何使用IAR仿真环境查看CPU类型字长？

    在此操作之前假设已有一个现成的cpu代码工程如:IAR for Stm8的Demo工程. 点软件仿真进入调试状态 单击菜单栏View –> Watch –> Watch 在新弹出来的Wat ...

  2. 你的iOS静态库该减肥了

    我有点震惊,国内的具有极少的有关静态库开发的内容,除了一些简单的如何教你开发,而且是原创还是copy,谁知道呢?细思极恐,不扯那么远了,这里就已切身的爬坑经历提供几个静态库瘦身的方案. 公司最近开发完 ...

  3. CMD-NET命令详解（转载）

    本文转自http://www.cnblogs.com/chenjq0717/archive/2010/05/09/1730934.html net命令大全,net命令用法,net网络命令,net命令使 ...

  4. ZZTHX-Androidannotations框架联想

    我们首先来看一段代码: 在android开发中findViewById是最常用的一个方法,用来实例化页面上的控件,基本上每个控件都需要调用一次的,加入我们页面上有100个需要使用,那么findView ...

  5. 《Java并发编程实战》第十五章 原子变量与非堵塞同步机制 读书笔记

    一.锁的劣势 锁定后假设未释放.再次请求锁时会造成堵塞.多线程调度通常遇到堵塞会进行上下文切换,造成很多其它的开销. 在挂起与恢复线程等过程中存在着非常大的开销,而且通常存在着较长时间的中断. 锁可能 ...

  6. android的ListView做表格添加圆角边框

    边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" enc ...

  7. PAT 1016

    1016. Phone Bills (25) A long-distance telephone company charges its customers by the following rule ...

  8. 绿荫工作室爱选修app内测

    下载地址:http://greendasungta.com/greencms/ixuanxiu.apk 开发目的是用于方便在校生的选课操作以及对选修课的交流.

  9. Enable HTTPS in Spring Boot

    Spring-boot-enable-ssl Enable HTTPS in Spring Boot APRIL 14, 2015DRISS AMRI This weekend I answered ...

  10. c++与c不太相同的一些地方1

    1.c++区别与java的一个地方:C++更多的是一种规范,不同时期的不同标准,提供了不同的语法要求.所以各个厂商在对C++的支持上也做得不尽相同,比如有些语法vs就支持gcc 就支持的差一些,而某些 ...