您的位置：首页 > Web前端 > CSS

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

2017-11-30 16:02 549 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航