原味来源: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. eclipse创建maven模块工程

    创建maven模块项目,可以使用eclipse工具来完成. 1.创建父工程,注意,要选择maven-archetype-site-simple new --> maven project 填写项 ...

  2. cocos2d-x Sprite

    转自:http://codingnow.cn/cocos2d-x/795.html 精灵是游戏中十分重要的组成部分,随处可见,如:游戏背景.NPC.人物.道具等.在cocos2d-x引擎中,只要是用图 ...

  3. 【转】Android 全屏方案（隐藏NavigationBar）

    http://www.07net01.com/2015/04/822292.html 在android4.0及其以上的版本中,出现了一个很屌的东西,叫做Navigation Bar,它和Status ...

  4. 写给新入IT的新人们

    IT=挨踢,这是IT人的自嘲,进入IT行业是有四五年了,也算得上是一个"老人"了吧,见了不少新人,面试了不少新人,也带了一些新人,多多少少还是有点发言权的. 关于书本 新人们经常会 ...

  5. shell修改文件名(一)

    假如文件名是:time_filename.txt 改成filename_time.txt.例如20111111_me.txt改成me_201111111.txt要如何修改? #! /bin/sh fo ...

  6. [置顶] MySQL Cluster初步学习资料整理--安装部署新特性性能测试等

    1.1 mysql-cluster简介 简单的说,MySQLCluster实际上是在无共享存储设备的情况下实现的一种完全分布式数据库系统,其主要通过NDBCluster(简称NDB)存储引擎来实现. ...

  7. Struts2 Action的访问路径

    1.     Action的访问路径 扩展名 缺省以.action结尾,请参考:default.properties文件,可以通过配置改变这一点: <constant name="st ...

  8. mysql replication inside

    http://keithlan.github.io/2015/07/16/mysql_replication_inside/

  9. 学习笔记之Shell & QSHELL

    shell(计算机壳层)_百度百科 http://baike.baidu.com/subview/849/15831672.htm Shell (computing) - Wikipedia, the ...

  10. MySQL（6）：数据操作

    1.创建数据(插入数据) (1)insert into  tab_name(字段列表)  values(值列表) (2)如果需要在插入时,为所有的字段设置值,那么可以省略字段列表.要求是值的顺序,应该 ...