首頁技術(shù)文章正文

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

更新時(shí)間:2021年09月07日18時(shí)41分來源:傳智教育瀏覽次數(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)塊元素，通常用來控制圖片/表單與文字的對(duì)齊。

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

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

猜你喜歡：

CSS的三大特性介紹

最新資訊