删除inline-block图像下的空间 [英] Get rid of space underneath inline-block image

查看:125
本文介绍了删除inline-block图像下的空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何摆脱图像底部和包装之间的空间,同时将图像保持为inline-block?为什么会发生这种情况?




How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?

http://jsfiddle.net/dJVxb/2/

HTML:

<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >                 
</div>

CSS:

​#wrapper {
    background:green;
}
img {
    display:inline-block; 
    margin:0;
}

解决方案

Write vertical-align:top;. Write like this:

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}

Check this http://jsfiddle.net/dJVxb/4/

这篇关于删除inline-block图像下的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆