老师好，怎样去掉空白缝隙呢？

老师好，怎样去掉图片下的小空白呢？图片200px,黑色区域50px,但整体是254.5px？？麻烦老师帮我解答一下，谢谢啦！

BIGJUN 2018-04-15

源自：网页布局案例 2-9 作业题

收起

3回答

好帮手慕珊回答被采纳获得+3积分 2018-04-17 10:08:40

这个是因为img本身的边距造成的，可以为img设置样式display: block，这样就可以了。祝学习愉快！

收起回答

BIGJUN 提问者 #1

谢谢老师！！！帮我解决了我的问题！！老师辛苦了！！

2018-04-17 16:39:10

提问者 BIGJUN 2018-04-16 19:39:06

html代码：
        <div class="galleryfoot">
               <div class="partone">
                   <div class="x1">
                       <img src="03-01.jpg">
                       <div class="xia">  SCIENCE LAB</div>
                   </div>
                   <div class="x1">
                       <img src="03-02.jpg">
                       <div class="xia">  INDOOR STADIUM</div>
                   </div>
                   <div class="x1">
                           <img src="03-03.jpg">
                           <div class="xia">  TRANSPORATION</div>
                   </div>
               </div>
               <div class="parttwo">
                   <div class="x1">
                       <img src="03-04.jpg">
                       <div class="xia">  KIDS ROOM</div>
                   </div>
                   <div class="x1">
                       <img src="03-05.jpg">
                       <div class="xia">  MEDITATION CLASSES</div>
                   </div>
                   <div class="x1">
                       <img src="03-06.jpg">
                       <div class="xia">  KIDS PLAY GROUND</div>
                   </div>
               </div>
           </div>
css代码：
.middle .gallery .galleryfoot{
   width: 100%;
   height: auto;
}
.middle .gallery .galleryfoot .partone{
   width: 960px;
   height: 250px;
   margin: 0 auto;
}
.middle .gallery .galleryfoot .partone .x1{
   float: left;
   margin-left: 20px;
   margin-top: 20px;
}
.middle .gallery .galleryfoot .partone .x1 img{
   width: 300px;
   height: 200px;
}
.middle .gallery .galleryfoot .partone .x1 .xia{

   font-family: Microsoft YaHei UI;
   font-size: 15px;
   color: #ffffff;
   background-color: #000;
   line-height: 50px;
   height: 50px;
}
.middle .gallery .galleryfoot .parttwo{
   width: 960px;
   height: auto;
   margin: 0 auto;
}
.middle .gallery .galleryfoot .parttwo .x1{
   float: left;
   margin-left: 20px;
   margin-top: 20px;
}
.middle .gallery .galleryfoot .parttwo .x1 img{
   width: 300px;
   height: 200px;
}
.middle .gallery .galleryfoot .parttwo .x1 .xia{
   font-family: Microsoft YaHei UI;
   font-size: 15px;
   color: #ffffff;
   background-color: #000;
   line-height: 50px;
   height: 50px;
}
以上是我这两个部分的代码，麻烦老师了！