没有实现图片与图片之间的距离 图片与边框之间的距离都相等
来源：3-4 编程练习
慕斯_Irice368
2019-04-29 14:39:16
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.nav{width:846px; border: 1px dashed #DBD9D9; }
.nav-list {
width: 100%;overflow:hidden;
}
.nav-list div {
width: 240px;
border: 1px solid #DBD9D9;
text-align: center;
margin:20px ;
float: left;
}
</style>
<!-- 此处编写样式 -->
</head>
<body>
<div class="nav">
<div class="nav-list">
<!--第一排导航-->
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div>
<a href="#"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> </a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
<div class="nav-list">
<!--第二排导航-->
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div>
<a href="#"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> </a>
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</div>
</body>
1回答
-
同学你好， 因为给每个小盒子设置了20px的外边距， 导致中间的盒子左右空白距离为40px. 可以给最外层大盒子添加20px的内边距，实现图片与边框的距离都相等。 示例
效果图：
如果帮助到了你，欢迎采纳
祝学习愉快~~~
0
相似问题