老师请检查
来源：4-12 编程练习
piii
2020-08-04 21:25:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div{
border:dashed 1px grey;/*边框，虚线1px，灰色*/
width:800px;
height:410px;
padding:10px 0px 0px 10px;
}
.div{
float:left;/*元素向左浮动*/
margin:10px;/*外边距，对象和对象*/
border:solid 1px grey;
}
p{
text-align:center;/*文本水平对齐方式为居中*/
margin-top:0px;/*上边距，对象和对象*/
}
</style>
</head>
<body>
<div id="div">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>不知道padding:10px 0px 0px 10px;这里的右和下，是哪里造成的10px的距离呀
写回答
1回答
-
同学的代码整体完成不错，不过建议给#div设置margin:auto，使其在网页中自适应居中。
同学说的右，下是指如下吗？
这里是根据计算得出，如：
图中阴影部分就是整个大div，宽度为800px，高度为410px。每个小div中，宽度为240px，高度为176px，边框宽度为1，小div设置margin为10px。
所以右侧的距离为：
800-240*3-10*6-1*6= 14px
（240*3是3个小div的宽度，10*6是指三个小div的左右margin，1*6是指三个小div的左右边框。）
PS：如果只计算右侧空白的宽度，需要加上最右边小div的margin-right，也就是10。右侧的空白距离为24px。
同理可得下方的距离为：
410-176*2-1*4-10*4=14px
（176*2是2个小div的高度，10*4是指两个小div的上下margin，1*4是指两个小div的上下边框。）
PS：如果只计算下方空白的距离，需要加上下边小div的margin-button，也就是10。下方的空白距离为24px。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
2
