Question

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

为什么会这样？

我的代码有问题吗？

我的示例代码在代码笔和下面给出： https://codepen.io/ramlals/pen/vwEYbo

<!DOCTYPE html>
<html>

<head>
    <title>Table template</title>
    <style>
       .table-column {
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .table-panel {
            background-color: rgba(0, 0, 0, .2);
            border: none;
            border-radius: 5px;
            margin-bottom: 15px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
            color: #fff;
        }
        .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);

        }
        .table-panel-title{
            font-weight: 400px;
            opacity: .9;
            text-transform: uppercase;
        }

    </style>
</head>

<body>
    <div class="table-container table-column">
        <div class="table-panel">
            <div class="table-panel-heading">
                <h3 class="table-panel-title">Status</h3>
            </div>
            <div class="table-panel-body">
                <table class="table-tag">
                    <tr>
                        <th>col-1</th>
                        <th>col-2</th>
                        <th>col-3</th>
                        <th>col-4</th>
                    </tr>

                    <tr>
                        <td>chrome1</td>
                        <td>chrome 2</td>
                        <td>chrome 3</td>
                        <td>chrome 4</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

您看到的是“总”高度。即height +顶部和底部padding和border-bottom。（44 + 28 + 1 = 73）

Answer 2

添加框大小：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;
        }

Answer 3

我认为您没有给出box-sizing或以content-box给出，因此正在发生这种情况。将其更改为border-box。

对于content-box height和width也包括padding和border。在您的情况下，其height为 44px ，padding-top和padding-bottom为 14px ，而border-bottom为 1px 。因此，总计为 44 + 14 + 14 + 1 = 73px 。

Answer 4

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

这适用于我的代码：

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

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

大小（高度/宽度）与CSS中显示的有所不同

4 个答案: