请老师帮忙看看，边距怎么弄呢
来源：3-4 编程练习
慕无忌4228145
2020-09-14 20:56:34
<!DOCTYPE html>
<html>
<head>
<title>float浮动练习</title><!-- 此处编写样式 -->
<style>
*{ margin=0; padding=0;}
a{text-decoration:none;
color:black;}
.contenter{
width:1024px;
background-color:ghostwhite;
border:1px #000000 solid;
overflow:hidden;
text-align:center;
}
.one{ width:300px;
margin:10px;
padding:10px;
padding:10px;
float:left;
border 2px blue solid;
}
.one a:hover{color:slateblue;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class='contenter'>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
<div class='one'>
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt=""></a>
<p><a href="">欢迎来到慕课网学习新知识</a></p>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕糖
2020-09-15
同学你好，同学说的边距具体是指哪个边距？这里不能确定具体说的是那块的边框，无法准确的解答，不过下面是根据同学代码实现的效果，给出的一些修改以及优化的建议：
1、如下，样式这里，属性与属性值之间应该使用冒号，例：
2、如下，属性与属性值之间，确实冒号，导致样式没有生效。需要添加上。
3、每个存放图片小盒子的边框，设置2px有些大了，建议：可以设置为灰色的1px。
且图片的宽度是240px，所以盒子的宽度设置240px，与图片一致即可，也不需要设置内边距，边框是紧挨着图片的。整体的修改可以参考如下：例：
4、盒子整体的宽度有些大了，内容没有填充满，导致右侧的空白多。一个图片单元的宽度是262px（包裹左右的外边距与边框），一行三个，262*3 = 786px，所以大盒子的宽度应该是786px。
大盒子的边框，可以设置为虚线。且图片下的文字不是居中的，可以不设置内容居中属性，整体修改可以参考如下，例：
如果我的回答帮助了你，欢迎采纳，若是还是关于边距的疑问，可以详细的描述下，再次提问。
祝学习愉快~
0
