【CSS技巧】如何去掉圖片上方的間隙
在網頁設計中，經常需要添加圖片來豐富內容。然而，你可能會發現，在默認情況下，圖片的上方會留出一些間隙，讓人感到不是很美觀。那么，我們該怎樣去掉這些間隙呢？
一、問題根源：圖片的基線
要解決這個問題，我們先來了解一下圖片的基線。實際上，圖片是以其下邊緣處的一條虛擬線作為基線的。而文字則是以其基線作為參照物來排布的。于是就產生了一些問題，比如文字和圖片在同一行內時，它們就需要共用同一條基線。因此，如果圖片高度不夠，就會留下一些空隙，讓我們感覺不舒服。
二、解決方式：修改圖片的垂直對齊方式
由此可見，解決這個問題，關鍵在于修改圖片的垂直對齊方式。我們可以通過在CSS中添加一些樣式來實現：
img{
vertical-align: middle; /*修改圖片的垂直對齊方式為垂直居中*/
display: block; /*將圖片轉換為塊級元素*/
}
通過這樣的方式，我們就能夠去掉圖片上方的間隙，讓頁面更加美觀了。
三、實例演示
下面，我們來看一個實例，具體實現方法如下：
HTML代碼：
<p>以下是一張圖片：</p> <p><img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo"></p>CSS代碼：
img{
vertical-align: middle;
display: block;
}效果如下圖所示：
四、總結
通過修改圖片的垂直對齊方式，我們可以解決圖片上方留白的問題，讓我們的網頁更加美觀。希望本文對你有所幫助，歡迎大家多多交流和學習。