相邻元素margin的自动合并与float的坑

css中相邻元素的margin其实是会自动合并的,且取较大值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.div1 {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 30px;
/*设置上下margin为30px*/
}
.div2 {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 60px 30px;
/*设置上下margin为60px*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

实际效果:div1和div2上下相距60px,而不是90px。

相邻元素margin的自动合并与float的坑

相邻元素margin的自动合并与float的坑

那float的坑是什么啦?

那就是float会取消相邻元素margin的自动合并!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 30px;
float: left;
/*设置左浮动*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

效果如下:两个div左右相距60px,而不是30px了!

相邻元素margin的自动合并与float的坑相邻元素margin的自动合并与float的坑

上一篇:C++引用(Reference)


下一篇:PHP与MySQL动态网站开发2