首頁技術文章正文

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

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

為什么圖片底部會有空白縫隙?

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

什么是基線?

如何去除圖片底部間隙?

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

vertical-align:middle;

vertical-align: top;

vertical-align: bottom;

上面3中對齊方式都可以

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

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

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

猜你喜歡：

CSS的三大特性介紹

最新資訊