1. 程式人生 > >對於在div或ul li 中加入圖片有各種空隙的小研究

對於在div或ul li 中加入圖片有各種空隙的小研究

其實,在正常規範程式碼的情況下,很少會有空隙的出現。但是即使你初始化了margin和padding,在div中加了一個圖片,下面還會有那麼3~5px的空隙,這是為什麼?
這裡寫圖片描述
首先,這種情況時,你沒有規定div的高度height(如果你加了的高度和圖片高度一致,就不用往下看了。。。。),那麼瀏覽器就會自己算出高度,並出現了這個空隙。。
這就關係到baseline的問題了,不過這個問題我也有點蒙,等以後徹底明白了再更新,說一下各種解決方法:
1:vertical-align: bottom為img設定這個,vertical-align 屬性設定元素的垂直對齊方式。
2:有一種原因,是空格回車等text造成的,解決方法:回車空格不過就是個字元,只不過我們看不見,那麼把font-size設定為0,就ok了。
這裡寫圖片描述


推薦方法2,這個方法還可以解決li display:inline後,有空隙的問題。
總之,遇到有了不該出現的空隙,就想想是不是有了看不見的空格,加font-size:0;試試~~~~
歡迎評論交流。