近期在做web页面设计的时候，莫名的发现最上面会出现一个横条，颜色为html的背景颜色。本意是那一片空横条应该为header的背景色。查了一些资料，发现是margin collapsing的问题，记录下来，希望刚開始学习的人少走弯路。

从问题说起

先给出demo的源代码和截屏，给出一个直观的印象。代码例如以下:

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

    html {

        width: 100%;

        height: 100%;

        max-height: 100%;

        margin: 0px;

        padding: 0px;

        background-color: blue;

    }

    body {

        width: 100%;

        height: 100%;

        max-height: 100%;

        margin: 0px;

        padding: 0px;

        background-color: orange;

    }

    #header {

        width: 100%;

        height: 38%;

        margin: 0px;

        padding: 0px;

        background-color: red;

    }

    #main {

        width: 100%;

        height: 62%;

        margin: 0px;

        padding: 0px;

        background-color: green;

    }

    #container {

        width: 80%;

        max-width: 864px;

        margin: 0px;

        padding: 0px;

        background-color: green;

    }

    #footer {

        width: 100%;

        height: 38%;

        margin: 0;

        padding: 0;

        background-color: gray;

    }

    </style>

</head>

<body>

    <div id="header">

        <h1>Hello</h1>

    </div>

    <div id="main">

        <div id="container">

        </div>

    </div>

    <div id="footer">

    </div>

</body>

</html>

截屏例如以下(注意最上面的蓝色横条，本想设计为红色):

问题的解决办法

margin collapsing，边界合并。h1默认margin-top值大于0，h1的top margin与header的top margin合并，合并之后的top margin又与body的top margin合并，html是根元素，不再继续合并，所以那个横条是body的margin，颜色为html的背景色。

解决的方法

解决的方法的思路有两条。其一，去除margin，也就是把margin设置为0；其二是破坏margin collapsing。

margin设置为0

真的非常easy，代码例如以下:

h1{

    margin-top: 0px;

}

破坏margin collapsing

这里的方法非常多，仅仅要是针对margin collapsing的规则，破坏当中的某一个或者多个环节。

设置父元素的overflow为auto或者hidden，代码例如以下:

#header {

    width: 100%;

    height: 38%;

    margin: 0px;

    padding: 0px;

    background-color: red;

    overflow: auto;

}

设为非负padding，代码例如以下:

#header {

    width: 100%;

    height: 38%;

    margin: 0px;

    padding: 0px;

    background-color: red;

    padding-top: 0.1px;

}

设置border, 代码例如以下：

#header {

    width: 100%;

    height: 38%;

    margin: 0px;

    padding: 0px;

    background-color: red;

    border:1px solid red;

}

參考链接

小记css的margin collapsing的更多相关文章

  1. CSS margin collapsing All In One

    CSS margin collapsing All In One margin collapsing margin 塌陷 / margin 合并 会出现 margin collapsing 的 3 种 ...

  2. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  3. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  4. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  5. 外边距塌陷 margin collapsing

    块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹 ...

  6. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  7. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  8. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  9. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

随机推荐

  1. Nmon 性能：分析 AIX 和 Linux 性能的免费工具

    原文摘自: http://www.ibm.com/developerworks/cn/aix/library/analyze_aix/ 官网:http://www.ibm.com/developerw ...

  2. opencv鼠标绘制直线 C++版

    因为需要在图片上标记直线,所以从网上找了相应的参考资料.但大多都是c风格的,于是自己就写了一个c++风格的. opencv2.4.11,win8.1,vs2013 #include <cv.h& ...

  3. C++自增和自减运算符(--和++)

    在C和C++中,常在表达式中使用自增(++)和自减(--)运算符,他们的作用是使变量的值增1或减1,如:++i(在使用i之前,先使i的值加1,如果i的原值为3,则执行j=++i后,j的值为4)--i ...

  4. QTableWidget排序问题

    今天写代码,发现Qt4中QTableWidget显示查询结果数据时存在一个问题,具体原因不知道是用法不对还是QTableWidget本身存在的bug.现象如下: 1.      查询,能正常显示查询结 ...

  5. Android 修改屏幕解锁方式

    Android 修改屏幕解锁方式 问题 在手机第一次开机的时候,运行手机激活的APP 在激活APP允许过程中,当用户按电源键的时候,屏幕黑掉,进入锁屏状态 手机默认的锁屏是滑动解锁 用户这个时候再一次 ...

  6. Android项目实战手机安全卫士（01）

    目录 项目结构图 源代码 运行结果 项目结构图 源代码 SplashActivity.java package com.coderdream.mobilesafe.activity; import a ...

  7. 【虚拟化实战】容灾设计之一VR vs SRM

    作者:范军 (Frank Fan) 新浪微博:@frankfan7 从本文开始,我们将介绍一系列的关于容灾的解决方案.先探讨应用的场景,然后再深入介绍技术架构. 情景一: 某小型公司的虚拟化环境中,在 ...

  8. [置顶] RFS的web自动化验收测试——常见问题指引

    引言:什么是RFS——RobotFramework+Selenium2library,本系列主要介绍web自动化验收测试方面. ( @齐涛-道长 新浪微博) 下面的内容还没整理好,先发个问题解决机制吧 ...

  9. WinFrom - DataGridView控件右键选中记录并弹出菜单

    dataGridView右键菜单并选中该行 程序代码: private void dataGridView1_CellMouseDown(object sender, DataGridViewCell ...

  10. 认识axure部件库中各个部件的属性

    在axure中每一个部件都有自己的属性,下面这个表格,我们就首先来了解认识一下!以下内容来自网站蓝图,版权归原作者所有! 属性名称 属性说明 属性举例 标签 用来标示部件的名称,在axure中,部件名 ...