margin合并的例子。-mingjwan-ChinaUnix博客

文章分类

文章存档

2014年（10）

2013年（23）

2011年（18）

2010年（15）

2006年（23）

我的朋友

相关博文

margin合并的例子。

分类：系统运维

2012-02-06 10:00:41

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<title>margin合并的示例</title>
</head>
<body>
<div id="level1" style="height:100px; position: relative; border: 1px solid red;overflow: auto">
<div id="level2" style="height:98px;position: relative;">
<div id="level3" style="margin:10px 0;border: 1px solid blue">111</div>
</div>
</div>
空内容也会出现滚动条：
原因如下：
1. level1是自动出现滚动条；<br>
2. level2高度和level1 一致。表示level已经被填满；<br>
3. pre的默认margin为13；此时需要的level1的空间大于level1的可用空间， level1出现滚动条；<br>
<div id="level1" style="height:100px; position: relative; border: 1px solid red;overflow: auto">
<div id="level2" style="height:98px;position: relative;border: 1px solid green;">
<div id="level3" style="margin:10px 0;border: 1px solid blue">111</div>
</div>
</div>
当给level2添加了border后，滚动条没有了。<br>
1. 当level2没有border时，边框合并功能会生效，这样level3的margin和level2的margin合并，并取大者，倒是level2的需求空间变大。
2. 当设置了border后，margin合并失效。显示正常。当然添加overflow也可以起到相同的效果；
3. 还有解决方法是去掉level3的margin。但是有些元素师默认有margin的。如pre。
<input type="button" value="add new line" onclick="ready()">
</body>
</html>

阅读(1340) | 评论(0) | 转发(1) |

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们