近期在做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. NanShan即时通讯论——HTML5的优势与劣势

    原文:NanShan即时通讯论--HTML5的优势与劣势 NanShan即时通讯 学习html时才是XHTML 1.0,接着是 HTML4.01,再到HTML5,如今HTML5 開始吸引越来越多的人的 ...

  2. USG 2210

  3. Nginx的500,502,504错误解决方法

    Nginx的500,502,504错误解决方法 一.解决500错误: 1.500错误指的是服务器内部错误,也就是服务器遇到意外情况,而无法履行请求. 2.500错误一般有几种情况: (1)web脚本错 ...

  4. java--异常处理总结

    [在程序中抛出异常] 在程序中抛出异常,一定要使用关键字throw. throw+异常实例对象. public class Demo2 { public static void main(String ...

  5. 谁是Docker的开发人员

    由CHRIS DAWSON发表在thenewstack/DATA RESEARCH qianhen123/CHB译 我们分析了Docker的容器库并提出两个问题: 1.Docker的贡献者们感兴趣的其 ...

  6. BZOJ 1101: [POI2007]Zap( 莫比乌斯反演 )

    求 answer = ∑ [gcd(x, y) = d] (1 <= x <= a, 1 <= y <= b) . 令a' = a / d, b' = b / d, 化简一下得 ...

  7. js注册检测 用户名、密码、手机号、邮箱

    请输入电话号码:<input name="" type="text" id="telphone" value="" ...

  8. /bin/bash^M: 坏的解释器: 没有那个文件或目录

    在Linux下编译cocos2d-x运行脚本的时候出现”/bin/bash^M: 坏的解释器: 没有那个文件或目录“这样的错误如下图. 解决方法: 使用在终端输入sed -i 's/\r$//' ma ...

  9. Ansi,UTF8,Unicode,ASCII编码的差别

    近日须要不同的编码,关于上述编码,一直迷迷糊糊,查了些资料,总算大致了解了,以下全是从网上搜来的: 1.  ASCII和Ansi编码    字符内码(charcter code)指的是用来代表字符的内 ...

  10. BLE简介和Android BLE编程

    一．BLE和BT区别 其实我知道许多程序员不太喜欢阅读除了代码以外的文档,因为有时这些过于冗长的文档对编程并没有更多的好处,有了协议,接口,demo差不多很多人就能写出很好质量的代码了.但其实更深入的 ...