HTML 按钮的默认高度是多少？

Question

我想让按钮高度比默认值稍大一点，但我不知道默认值是多少。我想让它动态化，最好使用 % 或 vh/vw，这样它在每个设备上看起来都不错。我还想知道默认的 %/vw/vh 。

我使用chrome来查找body标签的高度，相对于按钮高度，然后我用css将按钮高度设置为9vh，但这不起作用，body的高度只是增加了。然后我将身体高度设置为 100%，但这并没有什么区别。

我的代码：

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px;
  height: 9vh;

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

我希望它看起来与代码如下所示相同（我删除了

button, input[type="submit"]

部分中的高度属性，但按钮却非常大！：

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px; /* height used to be specified below */

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

Answer 1

我忍不住认为这是一个不好提出的问题。

• 为什么要让按钮高度“比默认稍大”？据推测，您要么需要固定高度，要么需要响应屏幕尺寸的动态高度。我不明白为什么你想要一个基于 HTML 默认值的任意大小。无论如何，按钮的默认高度将取决于字体大小。

• 如果你不设置身高，那么它将由它的孩子的大小决定。如果你有一个这样设置高度的body标签，然后添加一个9vh的按钮，你的body也会是9vh。

编辑：

如果您的目标是让按钮具有基于主体的动态高度，那么您需要设置主体高度，然后将按钮的高度设置为其父级的百分比。例如。主体高度设置为“100vh”，按钮高度设置为“70%”或其他效果。

Answer 2

大约 22-23px，如果有帮助的话！这并不完全正确，但我曾经希望我的按钮“比原来的大”，所以我调整了它的高度几次，看看它看起来是否接近原来的。它绝对位于黑白 22-25 像素。