时间戳

首页 > 解决方案 > What is the default height of an HTML button?

html - What is the default height of an HTML button?

问题描述

I want to make my button height just a slight bit bigger than the default, but I don't know what the default is. I want to make it dynamic, preferably using % or vh/vw, so that it looks good on every device. I also want to know the %/vw/vh that is default.

I used chrome to find the height of the body tag, in relation to the button height, and then I set the button height to 9vh with css, but this didn't work, the body's height just increased. I then set the body height to 100%, but this didn't make a difference.

My code:

.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;
}

I expected it to look the same as it would when the code would be like this ( I removed the height attribute in the button, input[type="submit"] section, but the buttons were extremely large instead!:

.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;
}

标签： htmlcssmacosgoogle-chromemacos-mojave

解决方案

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

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

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

编辑：

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

推荐阅读