图片与黑色部分中间有空隙,怎么消除它?

图片与黑色部分中间有空隙,怎么消除它?

http://img1.sycdn.imooc.com//climg/5a44dbad0001098804120354.jpg

<div class="gallery">
    <div class="GWORD">
    <div class="gallery">GALLERY</div>
    <hr>
    <div class="Gword">
        Lorem Ispsum is simply dummy text of the printing and type setting<br/>
        industry.Lorem Ispsum has been the industry's standard dummy text<br/>
        ever since the 1500s.
    </div>
    </div>
    <div class="Gpicture">
            <div class="block">
                <img src="03-01.jpg">
                <div class="text">SCIENCE LAB</div>
            </div>
            <div class="block">
                <img src="03-02.jpg">
                <div class="text">INDOOR STADIUM</div>
            </div>
            <div class="block">
                <img src="03-03.jpg">
                <div class="text">TRANSPORTATION</div>
            </div>
            <div class="block">
                <img src="03-04.jpg">
                <div class="text">KIDS ROOM</div>
            </div>
            <div class="block">
                <img src="03-05.jpg">
                <div class="text">MEDITATION CLASS</div>
            </div>
            <div class="block">
                <img src="03-06.jpg">
                <div class="text">KIDS PLAY GROUND</div>
            </div>
    </div>
    <div class="clear"></div>
</div>
/**
gallery的子区,GWORD区
 */
.content .gallery .GWORD{
    width: 100%;
    height: 245px;
}
.content .gallery .GWORD .gallery{
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-family: "Microsoft YaHei UI";
    font-weight:bold;
}
.content .gallery .GWORD hr{
    color: #07cbc9;
    width: 50px;
    margin:0 auto;
}
.content .gallery .GWORD .Gword{
    text-align: center;
    font-size: 16px;
    font-family: "Microsoft YaHei UI";
    color: gray;
    padding: 30px 0;
}
/**
gallery的子區,Gpicture區
 */
.content .gallery .Gpicture{
    width: 1300px;
    height: 700px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.content .gallery .Gpicture .block{
    height: auto;
    float: left;
    padding: 36.5px 36.5px;
}
.content .gallery .Gpicture .block .text{
    width: 350px;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    font-size: 16px;
    font-family: "Microsoft YaHei UI";
    background-color: #000000;
    padding-left: 10px;
}
.content .gallery .clear{
    clear: both;
}


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

可以为img标签设置这两个属性:

outline-width: 0px;

vertical-align:top; 

就可以去掉img周边的空白,祝学习愉快!

  • 高为砚 提问者 #1
    可以解释一下造成空隙的原因吗?还有这两个属性的意思
    2017-12-29 10:01:14
  • 好帮手慕珊 回复 提问者 高为砚 #2
    其实outline-width可以不设置,只设置vertiacl-align就可以了,而且属性值可以是top、middle、bottom都可以,也就是设置了垂直方向的对齐方式。之所以这么设置的原因是:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离。所以只要vertical-align的值不取baseline,就能去掉底下空隙
    2017-12-29 11:16:34
  • 高为砚 提问者 #3
    非常感谢!
    2017-12-29 11:18:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师