如何消除內聯區塊影像下方不需要的空間？

如何消除內聯塊影像下方不需要的空間

使用內聯塊影像時，您可能會遇到存在額外空間的問題圖像底部與其包裝之間的空間。這是內聯元素預設的垂直對齊方式造成的。

解決方案：使用垂直對齊方式

要去掉不需要的空間，需要設定垂直對齊方式對於影像。這可以使用垂直對齊屬性來完成。透過指定vertical-align:top，影像將與包裝器的頂部對齊，消除多餘的空間。

示例：

添加以下樣式你的CSS:

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

演示:

你可以在這個JSFiddle 上看到一個工作範例：http://jsfiddle.net/dJVxb/4/。更新後的 CSS 刪除了不需要的空間，並將圖片與包裝器的頂部對齊。

以上是如何消除內聯區塊影像下方不需要的空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！