3-4编程的练习

来源:3-4 编程练习

myhohner

2018-07-14 14:17:09

<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

<style type="text/css">

*{

margin: 0;padding: 0

}

.continer{

width: 820px;

overflow: hidden;margin: 0px auto

}

.continer div{

width: 240px;

border: solid gray thin;

}

.block1,.block2,.block3,.block4,.block5,.block6{

float: left;margin: 11.5px;


}

.block4,.block1{

margin-left: 23px;

clear: both

}



</style>

</head>

<body>   

        <!-- 此处写代码 -->  

        <div class="continer">

         <div class="block1">

         <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

         <div class="block2">

         <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

         <div class="block3">

         <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

         <div class="block4">

         <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

         <div class="block5">

         <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

         <div class="block6">

         <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">

         <span>欢迎来到慕课网学习新知识!</span>

         </div>

        </div>  

</body>

</html>

http://img.mukewang.com/climg/5b4994c400013c4607900362.jpg

老师,为何span文字与图片之间会留有一段空隙?始终找不出原因

写回答

1回答

好帮手慕阿莹

2018-07-14

http://img.mukewang.com/climg/5b49dc630001958009650400.jpg

同学是指红框处的白边么?建议同学加上下边的代码试试。图片有一个默认的边距,加上display:block;可以去掉白边。

img{

display:block;

}

如果我的回答解决了你的问题,请采纳,祝学习愉快.

0

0 学习 · 10204 问题

查看课程