有几个问题
来源：3-4 编程练习
慕桂英6102712
2019-11-08 12:00:09
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset='UTF-8'>
<title>Example</title>
<style>
*{
padding:0;
margin:0;
}
.container{
border:1px dashed;
width:800px;
}
.roll1,.roll2,.roll3,.roll4,.roll5,.roll6{
border:1px solid black;
float:left;
margin:12px;
}
.first{
overflow:hidden;
width:800px;
}
.second{
overflow:hidden;
width:800px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="first">
<div class="roll1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="roll2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="roll3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
<div class="second">
<div class="roll4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="roll5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="roll6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</div>
</body>
</html>
当我对每个roll应用了margin时，垂直方向上和水平之间的外边距似乎产生了叠加，导致间距更宽，而样例图片上和边框的间距和每个块的间距似乎是相等的，该怎么弄，对每个块单独设置外边距吗？垂直方向上不是会合并吗？
对.first和.second上用margin：0 auto没有作用,是什么原因
1回答
-
同学你好，关于同学的疑问，解答如下：
1、可以给类名为container的元素设置宽度为内容的总宽度，再设置padding值，padding值设置与first元素下div的margin值相等就可以了。
代码参考：
2、给first和second元素设置margin:0 auto；可以实现的是这两个元素在父级（也就是类名为container元素里）居中，因为container元素和first、second元素的宽度是一致的，所以看不出来效果。
祝学习愉快~
1
相似问题