gpt4 book ai didi

html - 大小(高度/宽度)显示与 CSS 中给出的不同

转载 作者:行者123 更新时间:2023-11-28 04:08:48 24 4
gpt4 key购买 nike

我正在使用(纯)HTML 和 CSS 创建示例表、输入和容器。显示的高度不同于我在 CSS 中给出的高度。例如,给定高度为 44px,但在浏览器中显示为 73px。

为什么会这样?

我的代码有什么错误吗?

Sample image

我的示例代码在代码笔和下面给出: 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>

最佳答案

您看到的是“总”高度。即 height + top and bottom paddingborder-bottom。 (44 + 28 + 1 = 73)

关于html - 大小(高度/宽度)显示与 CSS 中给出的不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56004125/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com