內聯圖片與基線對齊：深入探討負margin-bottom失效原因
網頁布局中，圖片垂直對齊常常令人頭疼。本文分析內聯圖片元素()與其所在行內盒子的基線對齊問題，特別是margin-bottom負值失效的情況。
問題： 一個元素與文本(“xxxxx”)位于同一
內，使用負margin-bottom調整圖片垂直位置，使其下邊緣與文本下邊緣對齊，但效果不理想。
代碼示例1 (含外邊距):
<div style="margin:40px;width:200px; outline:2px solid red;"> xxxxx@@##@@</img>xxxx </div>
代碼示例2 (嘗試負外邊距):
<div style="width:200px; outline:2px solid red;"> xxxxx@@##@@</img>xxxx </div>
為何代碼示例2中圖片下邊緣無法與文本下邊緣完美對齊？
關鍵在于css規范中對行內替換元素高度的計算方式。 CSS 2.1規范指出，行內替換元素（如
）的高度由其邊距盒（margin box）決定。 設置margin-bottom: -40px改變的是圖片邊距盒的高度，而非圖片內容的顯示區域。 我們看到的圖片下邊緣，是圖片內容本身的下邊緣，而非邊距盒的下邊緣。 因此，即使調整了margin-bottom，圖片內容下邊緣與文本下邊緣的對齊仍受圖片大小和行高計算的影響，導致無法完美對齊。 簡單來說，負margin調整的是邊距盒高度，而非圖片內容顯示區域的高度。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
