div中放入一個img元素導致div高度會多出幾個像素
阿新 • • 發佈:2018-05-14
itl 空白 mar 來看 -i 多說 css代碼 number 分享
在寫代碼的時候經常遇到這樣一個問題,如果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高度會多出幾個像素