關於img出現白色底邊問題


在開發的過程中,發現插入一張圖片后,圖片會出現白色底邊,很疑惑,反復調整都無濟於事,到底是哪里出現了問題呢?首先看一下圖片,banner下邊出現了白色底邊,上下都沒有設置邊距。

 

在學習中,有講到,img是行內替換元素,那什么是行內替換元素呢?我認識的內替換元素input還有textarea它們都可以設置height/width/padding/margin,它們具備了行內元素的特征,不獨占一行,同時也可以設置寬度、高度、內外邊距。

首先圖片display屬性,

 

他的默認值是Inline,它規定元素應該生成框的類型,而這個屬性的vertical-align的默認值是baseline。所以就會出現上圖的情況(圖片底部出現一個小留白區域)

解決的方法我覺得有兩個很好的方法:

方法一:我理解的img它只是行內替換元素,他不是塊級元素,那么直接把img變為塊元素 添加display:block;屬性,發現白色底邊消失了。

方法二:直接添加vertical-align:middle 因為是img的vertical-align默認屬性導致出現留白問題,所以直接修改vertical-align屬性值就行了。

以上是我個人的理解,如果發現有哪些錯誤,希望對我做出評價~


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com