近期在做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. pyfits例子

    下面是一个读入fits文件,画积分强度图,再把某个星表里的天体画到图上的python程序. ====================================================== ...

  2. HDOJ1728 BFS【STL__queue_的应用】

    STL__queue_的应用 调用的时候要有头文件: #include<stdlib.h> 或 #include<cstdlib> + #include<queue> ...

  3. Qt Charts的简单安装与使用

    http://blog.qt.io/blog/2016/01/18/qt-charts-2-1-0-release/ 下载地址: https://codereview.qt-project.org/# ...

  4. Gradle的简介与安装

    Gradle介绍 Gradle是一个基于JVM的构建工具,它提供了: 像Ant一样,通用灵活的构建工具 可以切换的,基于约定的构建框架 强大的多工程构建支持 基于Apache Ivy的强大的依赖管理 ...

  5. c++11 新特性之 autokeyword

    C++11是对眼下C++语言的扩展和修正.C++11包含大量的新特性:包含lambda表达式,类型推导keywordauto.decltype,和模板的大量改进. g++编译c++11命令加上 -st ...

  6. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  7. SQL Server 存储过程、触发器、游标

    存储过程 1.存储过程是事先编好的.存储在数据库中的程序,这些程序用来完成对数据库的指定操作. 2.系统存储过程: SQL Server本身提供了一些存储过程,用于管理有关数据库和用户的信息. 用户存 ...

  8. java 一个函数EnumMap返回多个值

    java 一个函数如何返回多个值   在开发过程中,经常会有这种情况,就是一个函数需要返回多个值,这是一个问题!! 网上这个问题的解决方法: 1.使用map返回值:这个方法问题是,你并不知道如何返回值 ...

  9. 在Ubuntu下编译Assimp库

    在Ubuntu下编译Assimp库 怎样在Ubuntu下编译Assimp库?这是我曾经编译成功后做的笔记,供參考. 1.去以下的站点去下载Assimp库: http://assimp.sourcefo ...

  10. How to find variable is empty in shell script

    (1). var="" if [ -n "$var" ]; then     echo "not empty" else     echo ...