Какова высота HTML-кнопки по умолчанию? ⇐ CSS

[Anonymous]

Я хочу сделать высоту кнопки немного больше, чем высота по умолчанию, но я не знаю, какая высота по умолчанию. Я хочу сделать его динамичным, желательно с использованием % или vh/vw, чтобы он хорошо выглядел на любом устройстве. Я также хочу знать %/vw/vh, который используется по умолчанию.

Я использовал chrome, чтобы найти высоту тега body по отношению к высоте кнопки, и затем я установил высоту кнопки на 9vh с помощью CSS, но это не сработало, высота тела просто увеличилась. Затем я установил высоту тела на 100 %, но это не имело значения.

Мой код:

< pre class="lang-css Prettyprint-override">.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;
}


Я ожидал, что он будет выглядеть так же, как если бы код был таким (я удалил атрибут высоты в кнопке, 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;
}


Подробнее здесь: https://stackoverflow.com/questions/559 ... tml-button