我創建了一個 html 文檔并在正文中添加了圖像。當我檢查圖像和身體的高度時，我發現它們的高度不同?？梢栽诖颂幉榭词纠?。這是html：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><script>window.onload = function() {var el = document.getElementById('test');console.log(el.scrollHeight,el.offsetHeight,el.clientHeight)console.log(document.body.scrollHeight,document.body.offsetHeight,document.body.clientHeight)}</script></head><body><img id="test" src="img2.png"/></body></html>控制臺輸出：768 768 768774 774 774為什么它們不同？我怎樣才能使它們相同或調整差異？
2 回答
富國滬深
TA貢獻1790條經驗 獲得超9個贊
因為img默認是內聯元素，并且vertical-align默認是baseline，也就是說它的底部和“x”字符的底部在同一行。雖然沒有 x 或其他文本，但它會像有一樣對齊。
因此，避免這種情況的三種方法是：
在img中添加樣式“display:block”，這樣垂直對齊會效率低下
將img的“vertical-align”樣式改為top、middle或bottom，這樣基線以下的區域就不會放大容器
在body中添加樣式“font-size:0”，這樣基線下的高度也將為0
桃花長相依
TA貢獻1860條經驗 獲得超8個贊
如果您將 img 包裹在 div 元素內并將 div 設置為 ，display:flex那么它將包裹圖像，然后我相信它的滾動高度將與圖像相同。
我從未更改過主體的顯示屬性，也許這也可以？我不知道你到底想要實現什么，所以我不知道我告訴你的是否對你有用
- 2 回答
- 0 關注
- 122 瀏覽
添加回答
舉報
0/150
提交
取消