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 交通频道 作文范文 下雨的感觉 综合办主任竞争演讲稿竞职演讲 逃跑的床 房产企业反腐倡廉学习心得 2010年医药卫生体制改革推进会讲话稿 自强不息的国家作文200字 关于做好春节期间药械安全监管工作的通知 乡镇贯彻落实**县十次党代会情况汇报 难忘的后悔事450字 写新年的趣事作文:我的新年趣事 再见了,母校出作文500字 参加暑假培训班 笑看花落作文600字 静夜,梦里无眠 成功在于勤奋!450字 市交通运输系统纪念建党94周年活动方案 学名师心得体会 爱有时只是主观的强加 文学梦作文300字 种子教师年度总结 黑空 成功创业者必备的素质和能力 小学三年级作文200字:看礼花 谁伤害了谁 送你一束蒲公英作文200字 40句感人的小情话 中华民族复兴路上的领航灯(庆七一演讲稿) 仪鸾殿早秋 MC小七为什么老天总那么无情,总那么喜欢捉弄人? 春节快乐手抄报 七夕之思 左道 患者家属致医生的一封感谢信 2013年世界卫生日活动方案 生命的诗歌:珍爱生命 再见,已是陌生人 异界成神录(第二集第三十八章)作文1100字 后面的青春 旅程作文350字 哀悼我那逝去的友谊作文200字 圣旨到(小小说) 迟到作文600字 中国剪纸作文1700字 小学五年级作文750字:小区的一位保安员 大学毕业生实习报告范文 我的爸爸好“残忍”700字 初中初三作文800字:游宁波凤凰山主题乐园 我是数码女孩 2015年民警入党申请书 送李邕之任滑台

Copyright © 2016 phpStudy |