html - 假设边框和背景是可见的，元素可见部分的高度是多少？

Question

我不确定如何计算它。非常感谢您的解释。

哪个是正确的，为什么？

126.219px

89.219px

94px

谢谢。

请引用这张图片

enter image description here

Answer 1

这取决于您是否使用 CSS box-sizing 属性。

当将 box-sizing 设置为内容框时，这将为您提供默认的 CSS box-sizing 行为。如果一个元素的宽度为 400px，那么内容宽度将为 400px，填充和边框宽度将添加到最终呈现的宽度 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

body{
 box-sizing: content-box;
 width: 100%;
 border: solid #5B6DCD 10px;
 padding: 5px;
}

边框框 - 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素，这 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常使得调整元素的大小变得更加容易。 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

body{
 box-sizing: border-box;
 width: 100%;
 border: solid #5B6DCD 10px;
 padding: 5px;
}