html 中margin问题求解
时间：2011-04-16
来源：互联网
有如下代码：
代码一[color=#FF6600][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head></p>
<p><body>
<div id="header">此处显示 id "header" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>
代码二[color=#FF0000][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>
求解代码一中的header main footer 是在一列中出现的，且margin：5px auto;请解释下main 和footer是离谁的距离是5px;
在第二段代码中side和main是在一行中出现的他们之间是紧挨着的，那为什么margin-left：120px没起作用那，为什么第一段中的模块之间有距离，但是在第二段代码中却没作用，应该是main离side的距离是120px,但是它却离左边浏览器的距离是120px,本人感觉第一段和第二段代码的现实结果是相互矛盾的，请明白者解释[color=#FF0000][/color]
代码一[color=#FF6600][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head></p>
<p><body>
<div id="header">此处显示 id "header" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>
代码二[color=#FF0000][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>
求解代码一中的header main footer 是在一列中出现的，且margin：5px auto;请解释下main 和footer是离谁的距离是5px;
在第二段代码中side和main是在一行中出现的他们之间是紧挨着的，那为什么margin-left：120px没起作用那，为什么第一段中的模块之间有距离，但是在第二段代码中却没作用，应该是main离side的距离是120px,但是它却离左边浏览器的距离是120px,本人感觉第一段和第二段代码的现实结果是相互矛盾的，请明白者解释[color=#FF0000][/color]
作者: YiXian_Qing 发布时间: 2011-04-16
1.margin合并
参考：http://www.jb51.net/css/21628.html
参考：http://www.jb51.net/css/21628.html
作者: T5500 发布时间: 2011-04-16
作者: T5500 发布时间: 2011-04-16
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
