在前端开发中，HTML 元素的布局和样式是非常重要的。其中一个常见的元素是 <div>，它通常用于组织、分隔页面的各个部分。然而，在设置 <div> 的高度时，需要考虑到它所包含的边框、边距和内容，这些因素都会影响其最终的高度。
边框(border)
边框是围绕 <div> 元素的外部轮廓线，可以通过 CSS 来设置。默认情况下，边框是没有占据空间的，也就是说，它不会影响 <div> 的高度。如果想要计算边框的高度，需要将其设置为实际占据空间的边框盒子模型（box-sizing），可以使用以下的 CSS 样式：
div {
box-sizing: border-box;
}设置 border-box 后，边框的宽度就会包含在 <div> 的高度中。
边距(margin)
边距是位于 <div> 元素外部的空白区域，用于调整元素与其他元素之间的距离。与边框类似，默认情况下，边距不会影响 <div> 的高度。如果要计算边距的高度，也需要使用 box-sizing 属性，并将其设置为 border-box：
div {
box-sizing: border-box;
margin: 10px;
}以上代码中，margin 属性设置了 <div> 元素的上、下、左、右边距都是 10 像素。由于使用了 border-box 盒子模型，这个 10 像素的边距将会被计算为 <div> 的高度的一部分。
内容(content)
内容是包含在 <div> 元素内部的文本或其他元素。与边框和边距不同，内容的高度是默认计算在 <div> 的总高度中的。也就是说，如果没有设置边框或者边距，那么 <div> 的高度就等于其内部内容的高度。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
--- -
------ ------
------- ------
------- --- ----- ------
-------- -----
------- -----
----------- -----------
-
--------
-------
------
-----
--------- -----------
------- -- -- ------- -- - --- ------------
------
-------
-------以上代码中，<div> 元素设置了固定的宽度和高度，并且包含了 2 像素的边框、20 像素的内边距和 10 像素的外边距。由于使用了 border-box 盒子模型，这些边框和边距都会被计算为 <div> 元素的高度一部分。在 <div> 内部，包含了一个标题和一个段落元素，它们也会影响 <div> 的总高度。
总结
在设置 HTML 元素的高度时，需要考虑到其包含的边框、边距和内容对其最终高度的影响。通过使用 box-sizing 属性，可以将边框和边距的占据空间计算在元素的高度中。理解这些概念并正确地掌握它们的使用方法，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24153