在網(wǎng)頁設計與開發(fā)中，圖片是展示網(wǎng)頁內(nèi)容的重要元素之一。在設置圖片時，我們可以使用 CSS 的 background-image 屬性或標簽等方式來插入圖片。不過，有時候我們在頁面中插入圖片后發(fā)現(xiàn)，圖片在垂直方向上只有基線，上下留白較多，影響頁面美觀度。那么，如何解決這個問題呢？

首先，需要了解造成該問題的根源，即基線對齊規(guī)則。在默認情況下，圖片的基線會與其所在行內(nèi)元素的基線對齊，這樣可以保證文字和圖片在同一行內(nèi)，并且垂直方向上看起來比較整齊。

.container{
font-size: 14px;
}
.text{
display: inline-block;
vertical-align: baseline;
}
.img{
background-image: url("../images/test.jpg");
background-size: cover;
display: inline-block;
width: 200px;
height: 100px;
vertical-align: baseline;
}

解決方法有多種，其中較為簡單的方式是通過垂直對齊方式來調(diào)整圖片位置。可以將圖片設置為 inline-block，將其和文本同級并設置 vertical-align: top 或 middle 等垂直對齊方式，這樣可以讓圖片在頁面中垂直方向上與文本對齊，并且留白減小。

.img{
display: inline-block;
width: 200px;
height: 100px;
vertical-align: top;
}

除此之外，還可以使用