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 交通频道 作文范文 我的初三这样度过作文400字 男人是什么 向命运挑战的励志短语 放下不争 冲刺中考演讲稿 2015安老助孤慈善募捐活动方案 今生,为你默默的等待 地籍办证中心副主任竞聘演讲稿 我的地球仪 小学三年级作文550字:登山 回 眸 我喜欢的小狗作文150字 自己的脸 大好时间经典台词语录 2016年描写快乐的春节作文:充实的春节 物业公司保安部年度工作总结 还未等来春暖花开,你却只留下我一人作文1100字 你是世界的独一。爱情经典语录(爱情语录) 受了伤还如何诠释幸福。 不能说出的喜欢 我心目中的好老师 900字 故乡的水库 美丽的梅溪湖作文400字 雨滴的自述 州林业局党组“三严三实”第一次专题学习研讨方案 儿时的雪 最美的树 医院党支部2012年工作总结 关于智慧树的经典语录 青春的旋律作文2800字 小猴尿床600字 工程建设部项目管理室工作总结 2015幼儿园全国交通安全日活动总结 又到夏天大忙时 15年期末家长会发言稿 端午节好段 火星之旅(-) 师德师风先进个人事迹 其实,失败也很美 倘若作家爱上了音乐 误入凡间的天使却为我折翼第一章-原来,这就是天使 唇齿微凉薄荷糖 读战胜命运的孩子有感 民营高新技术企业人才创业的政府职能创新 女孩该如何学会成长 2016客服中心交房保证书 巴金的《春》读后感 直销成功邀约的7大秘诀 路灯霓红作文400字 读世人婚姻之百态

Copyright © 2016 phpStudy |