消除图像下方的间距 [英] 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屋！