近期在做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. asp.net 生成、解析条形码和二维码

    原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...

  2. Robot Framework: 自定义自己的python库

    利用Robot Framework编写测试用例,往往需要开发自己的关键字,有的关键字需要通过自己编写python代码来实现.这在rf中,就需要自己定义python库.这个过程其实不复杂,本文来介绍下. ...

  3. 高性能MySql学习笔记——锁、事务、隔离级别（转）

    为什么需要锁? 因为数据库要解决并发控制问题.在同一时刻,可能会有多个客户端对Table1.rown进行操作,比如有的在读取该行数据,其他的尝试去删除它.为了保证数据的一致性,数据库就要对这种并发操作 ...

  4. Gora_百度百科

    Gora_百度百科     Gora    编辑    目录         1什么是Apache Gora         2为什么要使用Apache Gora         3Gora的一个源代 ...

  5. UVa 二分图匹配 Biginners

    UVa 1045 - The Great Wall Game 最小权匹配 题意:给你一个n*n的棋盘,上面有n个棋子,要求通过移动各个棋子使得棋子在同一行或者同一列或者对角线上,求最小移动次数. 思路 ...

  6. Xcode6使用storyboard在TabBarController上建立三个以上Item

    在Xcode5上做以上的操作没有问题,这次是要在Xcode6上实现之,特记录以备用. 首先新建一个storyboard文件.取名Custom.storyboard.拖动菜单添加一个TabBarComt ...

  7. LoadRunner 监控 Apache

    配置Apache部分 1.修改Apache中Httpd.conf文件 <Location /server-status> SetHandler server-status Order de ...

  8. ul不加宽高

    ul可以不加宽高,但是不能用margin(上下左右), 可以用margin(左右),否则里面的内容如果是要左右浮动的话,就会掉下来

  9. Java 异常解决之java.lang.IllegalArgumentException: Comparison method violates its general contract!

    Java 异常解决 在你的代码前加一句 System.setProperty("java.util.Arrays.useLegacyMergeSort", "true&q ...

  10. EasyUI - DateBox组件

    效果: html代码: <input type ="text" id ="box" /> JS代码: $(function () { //设置返回格 ...