如何消除內聯塊影像下方不需要的空間
使用內聯塊影像時,您可能會遇到存在額外空間的問題圖像底部與其包裝之間的空間。這是內聯元素預設的垂直對齊方式造成的。
解決方案:使用垂直對齊方式
要去掉不需要的空間,需要設定垂直對齊方式對於影像。這可以使用垂直對齊屬性來完成。透過指定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中文網其他相關文章!