css的margin collapsing导致最上面会出现一个横条


最近在做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>

截屏如下(注意最上面的蓝色横条,本想设计为红色):
http://img.blog.csdn.net/20140521114915156?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2lteWxyb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

问题的原因

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

真的很简单,代码如下:

复制代码
代码如下:

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;
}



相关阅读:
MacOSX右上角的工具图标很凌乱如何清理
javascript每日必学之封装
Ubuntu下如何使用命令删除PPA仓库(软件仓库)
js检测浏览器版本、核心、是否移动端示例
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
图片在div中垂直和水平同时对齐的实现方法
常用SQL语句查询分享
android实现简单的乘法计算代码
node.js中的fs.fstatSync方法使用说明
android 多线程技术应用
Yii学习总结之数据访问对象 (DAO)
Windows下MySQL安装配置方法图文教程
Linux创建FIFO文件类型的方法
Win7系统开机弹出模块xxx.dll已加载但找不到接入口DLLRegisterServer的原因及解决方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 寒假复活读后感 站在心灵的十字路口 学骑自行车的启示300字 科技课真有趣 小学四年级作文400字:恼人的电话铃 三年级上学期语文教学工作计划 感动的十天 水是故乡甜 青年文摘2011年第21期在线阅读 深圳打工生涯(一) 观看《让党旗更鲜艳》的心得体会 你不要担心 只是、季节的童话作文650字 我和孤儿200字 那是一个冬天 黛色第六章-晚宴 心伤,只有你能治! 护士转正自我鉴定范文2015 观察大蒜作文450字 军训心得作文1000字 春节的年味为什么越来越淡? 睡前的故事 小学五年级作文600字:空中大战 No road of flowers leads to glory. //英文励志名言警句 高中高三作文1500字:海 有关写新年的回忆作文:新年里的回忆 小学五年级作文650字:友 情 的 分 量 2015毕业生党员思想汇报 初中初一作文1200字:走在充满美的校道上 邀请函英文格式 大学生实习决心书_决心书 小学五年级作文450字:珍爱生命 拒绝毒品 散文随笔:另一样的风景 关于团队精神的名言名句 关于建设节约型机关的意见 念孔明赋作文200字 药丸与糖果 世界上最感人的话-感动的一句话 搓麻将与“黄石的孩子” 我多想为你 秋之赋作文450字 细火快炖 小时候的热蛋糕 “八一”广场的夜晚 【心理测试:测你像《奋斗》里的谁】 武则天经典语录 我读《名人的少年时代》500字 秋天的景色作文400字 原来是爱 让女孩感动的话,不管今世也来世也好,我所要的只有你

Copyright © 2016 phpStudy |