码迷,mamicode.com
首页 > Web开发 > 详细

css margin

时间:2014-08-24 17:55:12      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   for   ar   art   

  诚实地面对自己,知之为知之,不知为不知。

好像看了几篇博客,不过懂得东西,吸收到的只有这么点...

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>

效果为:

bubuko.com,布布扣

            图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}

效果将如下:

bubuko.com,布布扣

           图2

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

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

效果将如图2。

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

没看懂了.....

css margin

标签:style   blog   http   color   os   io   for   ar   art   

原文地址:http://www.cnblogs.com/wj204/p/3932951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!