我创建了一个html文档，并在正文中添加了图像。当我检查图像和身体的高度时，我发现它们的高度不同。可以查看样品here。这是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 768
774 774 774
为什么它们不同？如何使它们相同或调整差异？
如果将img包裹在div元素内，并将div设置为display:flex，则它将包裹图像，然后我相信其scrollHeight将与图像相同。
我从未改变过身体的显示属性，也许那样行得通吗？我不知道您到底想完成什么，所以不知道我告诉您的内容是否会为您工作
因为img在默认情况下是一个内联元素，而垂直对齐默认情况下将是基线，这意味着其底部将与“ x”字符底部的同一行。尽管没有x或其他文本，但它会像有文本一样对齐。
因此避免这种情况的三种方法是：