老师，为什么我设置的margin属性值并没有像前面那样叠加呢？
来源：3-4 编程练习
慕运维0332677
2019-10-23 19:44:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float案例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 786px;
border: 1px dashed gray;
overflow: hidden;
}
.con{
width:240px;
float: left;
border: 1px solid gray;
margin:10px;
}
</style> <!-- 此处编写样式 -->
</head>
<body>
<div class="container">
<div class="con">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="con">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="con">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="con">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="con">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="con">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div> <!-- 此处写代码 -->
</body>
</html>
1回答
-
同学你好，因为元素在设置了浮动以后，margin值就不会再进行叠加了哦。
另外同学的代码实现的效果很好哦，再提一个小建议，可以给整体的大盒子container设置margin：0 auto让其在网页中间显示，效果会更好 哦，继续加油！
希望我的回答能够帮助到你，望采纳，祝学习愉快！
0
相似问题