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

Question

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

我使用 chrome 找到 body 标签的高度，相对于按钮高度，然后我使用 css 将按钮高度设置为 9vh，但这没有用，body 的高度只是增加了。然后我将 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

我不禁认为这是一个糟糕的问题。

为什么要按钮高度是"slightly bigger than default"？据推测，您要么想要一个固定高度，要么想要一个响应屏幕尺寸的动态高度。我不明白为什么您需要基于 HTML 的默认值的任意大小。无论如何，按钮的默认高度将取决于字体大小。
如果不设置身高，则由身高children决定。如果你有一个body标签这么设置高度，然后添加一个9vh的按钮，你的body也是9vh。

编辑：

如果您的目标是使按钮具有基于主体的动态高度，则需要设置主体高度，然后将按钮的高度设置为其 parent 的百分比。例如。主体高度设置为“100vh”，按钮高度设置为“70%”或类似的效果。

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

What is the default height of an HTML button?

html

css

macos

google-chrome

macos-mojave