首頁  >  文章  >  web前端  >  如何消除內聯區塊影像下方不需要的空間?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-03 17:36:02450瀏覽

How to Eliminate Unwanted Space Below Inline-Block Images?

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

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

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

要去掉不需要的空間,需要設定垂直對齊方式對於影像。這可以使用垂直對齊屬性來完成。透過指定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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn