近期在做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. BZOJ 1537: [POI2005]Aut- The Bus(dp + BIT)

    对y坐标离散化, 然后按x坐标排序, dp. 一个点(x, y), 设到达这个点接到的最多乘客数为t, 那么t可以用来更新y'>=y的所有点.用树状数组维护最大值. -------------- ...

  2. mysq Point类型 查询和插入操作：insert和select

    首先,创建一个表名为geometry2的表,然后增加一个名为gemo的point类型的字段. insert方法有4中,例如以下所看到的://============================== ...

  3. 道格拉斯—普克(Douglas一Peukcer)节点抽稀算法

    Douglas一Peukcer算法由D.Douglas和T.Peueker于1973年提出,简称D一P算法,是眼下公认的线状要素化简经典算法.现有的线化简算法中,有相当一部分都是在该算法基础上进行改进 ...

  4. [WPF源代码]QQ空间相册下载工具

    放一个WPF源代码,源代码地址 http://download.csdn.net/detail/witch_soya/6195987 代码没多少技术含量,就是用WPF做的一个QQ空间相册下载工具,效果 ...

  5. hdu1172猜数字

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1172 题目 猜数字 Time Limit: 20000/10000 MS (Java/Others) ...

  6. 简单的方式实现javascript 小数取整

    JS: function truncateNumber(n){ return n|0; } 測试: console.log(truncateNumber(12.345)); 浏览器打印出12

  7. C语言，题目：函数调用，内存，malloc找错

    malloc int* p = (int *) malloc (sizeof(int)*128); //分配128个(可根据实际需要替换该数值)整型存储单元,并将这128个连续的整型存储单元的首地址存 ...

  8. 将 mp3 等音乐资源以资源形式嵌入 exe 文件中

    引用:http://www.easyx.cn/skills/View.aspx?id=6 本文讲解怎样将 mp3 等音乐资源以资源形式嵌入 exe 文件中,并通过 mciSendString 调用.嵌 ...

  9. 基于visual Studio2013解决面试题之0902内存拷贝

     题目

  10. C#的静态构造函数

    “静态构造函数”典型应用于第一次使用类时的初始化工作,注意“第一次”,意思是它只执行一次. 有同学说了,类的初始化不是有构造函数嘛?我们回答:构造函数是每个实例被声明时都会执行的,它属于每一个实例,而 ...