Html 大小（高度/宽度）的显示方式与CSS中给出的不同

我正在用纯HTML和CSS创建一个示例表、输入和容器。高度显示的不是我在CSS中给出的高度。例如，给定高度为44px，但在浏览器中显示为73px

为什么会这样

我的代码有错误吗

我的示例代码在代码笔中给出，如下所示：

---

你看到的是总高度。i、 e.高度+顶部和底部衬垫以及底部边框。44+28+1=73

你看到的是总高度。i、 e.高度+顶部和底部衬垫以及底部边框。44+28+1=73 框大小：边框框

 .table-panel-heading{
            padding: 14px 22px;
            height: 44px;
            border-bottom: 1px solid rgba(0,0,0,.12);
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);
            box-sizing: border-box;
        }

加 框大小：边框框

 .table-panel-heading{
            padding: 14px 22px;
            height: 44px;
            border-bottom: 1px solid rgba(0,0,0,.12);
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);
            box-sizing: border-box;
        }

---

我认为要么你没有给出框大小，要么它作为内容框给出，所以这就是原因。将其更改为边框框

---

对于内容框，高度和宽度还包括填充和边框。在您的例子中，它的高度为44px，填充顶部和填充底部为14px，边界底部为1px。所以，总的来说，它是44+14+14+1=73px。

我认为要么你没有给出框大小，要么它作为内容框给出，所以这就是原因。将其更改为边框框

---

对于内容框，高度和宽度还包括填充和边框。在您的例子中，它的高度为44px，填充顶部和填充底部为14px，边界底部为1px。所以，总共是44+14+14+1=73px。

在我接受之前，有人发布了答案并删除了

这适用于我的代码：

只需在我的CSS中添加以下内容-

* {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
       }

---

在我接受之前，有人发布了答案并删除了

这适用于我的代码：

只需在我的CSS中添加以下内容-

* {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
       }

---

您应该添加一些解释，并说明表的行为，调整大小以适应其内容您应该添加一些解释，并说明表的行为，调整大小以适应其内容