css之margin相关的问题以及解决办法

来源:互联网 发布:杭州java工资 编辑:程序博客网 时间:2024/06/16 02:37

1. 问题

1.1 IE6下的双边距问题。解决办法:使用display:inline;或者是去掉浮动。

1.2 margin的重叠问题。

解决办法:

方法一:解决margin重叠最好的办法就是避免它;

方法二:使用浮动,浮动可以解决margin的重叠问题,只能解决同方向上的重叠,不同方向上的是无法解决的。代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;float: left;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;clear: both;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>

方法三:给父级元素添加overflow:hiddden,代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;overflow: hidden;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>
方法四:父级盒子添加边框,代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;border: 1px solid #000;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>

原创粉丝点击