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>

阅读全文

0 0