div中放入一个img元素导致div高度会多出几个像素

Posted huancheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div中放入一个img元素导致div高度会多出几个像素相关的知识,希望对你有一定的参考价值。

在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px。好了,废话不多说,直接给大家上代码。

html代码:

<div id = "header">
    <img src="img/header.png"/> 
</div>

css代码:

#header{
    width : 400px ;
    border : 1px solid #000 ; /* 为了方便观察,此处给div加了1px的边框 */
}
#header img{
    width: 100% ;
}

运行结果如下图:

技术分享图片

 

可以明显看到div实际高度高出img高度3px。为了解决此问题,我们只需要给img元素添加一个display : block ;即可,代码如下:

#header img{
    width : 100% ;
    display : block ;
}

现在再来看运行结果,是不是完全变好了呢?

技术分享图片

 

通过百度了解到原因,原来img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px。

以上是关于div中放入一个img元素导致div高度会多出几个像素的主要内容,如果未能解决你的问题,请参考以下文章

关于div包裹imgiframe等标签会多3px或4px的问题

父元素高度比子元素高度多几个像素的解决方法

span设为inline-block之后,未包含文字时下面会多出一条空白问题

div里包含img底部必定多出空白的解决办法

div嵌套img高度不相同

div中嵌套img元素,4px空白