css margin

css中margin边界叠加问题：

　　看个同方向和异方向margin重叠现象：

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  body { background-color:#CFC}
 .outer{ margin: 30px;  width: 300px; background-color:#669; }
 .inner1{ margin: 30px; padding: 8px; background-color:#3CF; color: white;}
 .inner2{ margin: 30px; padding: 8px; background-color:#96F; color: white; }
</style>
</head>

<body>
<div class="outer">
<div class="inner1">margin1</div>
<div class="inner2">margin2</div>
</div>
</body>
</html>

效果为：

　　　　　　　　  　　图1

这里inner1与outer的上边距重叠了，inner1的下边界与inner2的上边界重叠了，inner2的下边距与outer的下边距重叠了

参考这里的解决办法:margin边界重叠问题

只知道如何解决同方向margin重叠问题：

①给外部的div添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;

 .outer{ margin: 30px;  width: 300px; background-color:#669;overflow:hidden; zoom:1}

效果将如下：

　　　　　　　　　　　图2

②增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。

.outer{ margin: 30px;  width: 300px; background-color:#669;padding:1px;}

效果将如图2。

然后再认真滴看下这篇博客：CSS中margin边界叠加问题及解决方案

没看懂了.....

后续：在群里看到一个这样的问题

1.

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,html{
    margin:0;
    padding:0;
}
#box{
    width:300px;
    height:300px;
    background-color:#F00;    
}
#box .center{
    display:block;
    width:50px;
    height:50px;
    margin:20px;
    background-color:#3F6;
}    
</style>
</head>

<body>
    <div id="box">
        <div class="center"></div>
    </div>
</body>
</html>

图5.1

效果如图5.1所示。

再看下改下这个#box .center{ display:inline-block; width:50px; height:50px; margin:20px; background-color:#3F6; }

效果将是如下：

为什么会出现这种现象：

看下这个资料

posted @ 2014-08-24 16:59  wj704  阅读(216)  评论(0)  编辑  收藏  举报