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

全國咨詢/投訴熱線：400-618-4000

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

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

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

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


什么是基線?

基線

如何去除圖片底部間隙?

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

vertical-align:middle;

vertical-align: top;

vertical-align: bottom;

上面3中對齊方式都可以

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


2.將img通過display: block;轉為塊級元素。

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



猜你喜歡：

CSS的三大特性介紹

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

CSS層疊性權重計算方法

CSS幾種常見的頁面布局方式介紹

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

0 分享到：
和我們在線交談！