消除图像下方的间距 [英] Removing spacing under the image
本文介绍了消除图像下方的间距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
HTML:
< div>
< img src = http://static.jsbin.com/images/jsbin_16.png />
< / div>
CSS:
< pre class = lang-css prettyprint-override>
div {border:5px solid#000; }
img {border:1px纯红色; }
问题插图:
我的问题是图像,我在 div
容器中添加了 black 边框,在 img <中添加了 red 边框/ code>使其更具说明性。
演示:
JsBin
解决方案
发生这种情况是由于 img
布局,只需将其更改为 display:block
:
JSBin
或将 vertical-align
属性更改为 top
:
JSBin
或设置 font-size: 0
到 div
容器:
JSBin
或设置 line-height:0
到 div
容器:
JSBin
HTML :
<div>
<img src="http://static.jsbin.com/images/jsbin_16.png" />
</div>
CSS :
div { border:5px solid #000; }
img { border:1px solid red; }
Issue illustration :
My problem is the space under the image, I added black border to the div
container and red border to the img
to make it more demonstrative.
Demo :
JsBin
解决方案
This happens due to img
layout, just change it to display: block
:
JSBin
Or change vertical-align
property to top
:
JSBin
Or set font-size: 0
to the div
container :
JSBin
Or set line-height: 0
to the div
container :
JSBin
这篇关于消除图像下方的间距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文