教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

CSS如何去除圖片間隙？【CSS教程】

更新時(shí)間:2021年09月07日18時(shí)41分 來(lái)源:傳智教育 瀏覽次數(shù):

為什么圖片底部會(huì)有空白縫隙?

圖片和行內(nèi)塊元素默認(rèn)底線會(huì)和父級(jí)盒子的基線對(duì)齊，因此就會(huì)產(chǎn)生白色縫隙。


什么是基線?

基線

如何去除圖片底部間隙?

1.用vertical-align:middle | top| bottom等，讓圖片不和基線對(duì)齊。

vertical-align:middle;

vertical-align: top;

vertical-align: bottom;

上面3中對(duì)齊方式都可以

vertical-align不影響塊級(jí)元素中的內(nèi)容對(duì)齊，它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素， 通常用來(lái)控制圖片/表單與文字的對(duì)齊。


2.將img通過(guò)display: block;轉(zhuǎn)為塊級(jí)元素。

轉(zhuǎn)為塊級(jí)元素之后，就不存在和父級(jí)盒子基線對(duì)齊的問(wèn)題了。



猜你喜歡：

CSS的三大特性介紹

css定位詳解：css中定位類型

CSS層疊性權(quán)重計(jì)算方法

CSS幾種常見(jiàn)的頁(yè)面布局方式介紹

傳智教育web前端開發(fā)培訓(xùn)課程

0 分享到：
和我們?cè)诰€交談！