如何刪除內聯區塊影像下方的空白，同時保持它們嵌入？

如何在保持影像內嵌塊的同時移除內嵌塊影像底部與包裝器之間的空白

在CSS 中使用inline-block 可以使圖像與文字元素一起排列。然而，在某些情況下，你會遇到圖像底部與包裝器之間出現空白的問題。這可能是由於瀏覽器為內聯塊元素添加了預設垂直間距。

要解決這個問題，你可以將 vertical-align 屬性設為 top。這樣可以將影像的垂直對齊方式設為頂部，從而消除空白。

<code class="css">img {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}</code>

套用此樣式後，影像將與包裝器的頂部對齊，空白將被移除。

需要注意的是，此解決方案不適用於所有瀏覽器。在某些較舊的瀏覽器中，可能需要使用其他方法，例如將圖像包裝在 span 元素中，並為該元素設定 vertical-align: top。

以上是如何刪除內聯區塊影像下方的空白，同時保持它們嵌入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！