在前端開發(fā)中，我們常常會遇到一個問題：使用CSS將圖片與文字并排展示時，經(jīng)常會出現(xiàn)圖片下方莫名其妙的空白間隙，讓我們感到非常困擾。這種情況一般是由于文本的行高所致。 當我們將一張圖片與一段文本放在同一行時，瀏覽器會按照文本的行高來排版，而圖片本身并不具備行高屬性。所以如果圖片高度小于文本行高，瀏覽器會自動在圖片下方添加一定的空白，以保持文本的行高一致。 要解決這個問題，我們可以通過以下兩種方法來嘗試。 方法一：使用vertical-align屬性 我們可以使用CSS的vertical-align屬性來讓圖片與文本在同一水平線上對齊。具體的方法是，將圖片的vertical-align屬性設置為middle或bottom，使其與文本底部對齊或垂直居中。 例如，以下是一段HTML代碼，展示了使用了vertical-align屬性的圖片與文本：

<p>
<img src="example.jpg" alt="example">
<span style="vertical-align: middle;">這是一段文字</span>
</p>

方法二：使用line-height屬性 我們也可以通過調(diào)整文本的行高，讓它與圖片高度一致，從而消除圖片下方的空白間隙。我們可以通過設置p標簽的line-height屬性來實現(xiàn)這個效果。 例如，以下是一段HTML代碼，展示了使用了line-height屬性的圖片與文本：

<p style="line-height: 50px;">
<img src="example.jpg" alt="example">
<span>這是一段文字</span>
</p>

在實際開發(fā)中，我們可以根據(jù)具體情況和需要來選擇以上兩種方法的其中一種，或者根據(jù)需要結合使用兩種方法。 總的來說，消除CSS圖片下方空白間隙的方法并不困難，但需要我們在實際開發(fā)中多加注意和實踐。希望以上的介紹能對大家有所幫助。