我设置的mgrgin:10px; 可是为什么小div之间的距离是20px,不是应该是重合的吗？
来源：3-4 编程练习
慕少8534263
2019-05-01 15:28:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编程练习</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#container{
width: 786px;
border: dashed 1px gray;
overflow: hidden;
margin: 0 auto;
}
.float1{
width: 240px;
margin: 10px;
border: 1px solid gray;
float: left;
}
.special{
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div class="float1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="float1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="float1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="float1 special">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="float1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="float1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>写回答
1回答
-
你好同学，元素浮动之后，就不会存在margin重叠的现象哦。另外，建议给父元素div设置一个填充，这样与图片的间距叠加起来也是20px，与图片之间间距一致：
祝学习愉快，望采纳。
0
相似问题