Как сделать ширину не меньше высоты?

Question

[RimMirK]

Пишу стиль для <kbd>, в результате должно получится что-то на подобии настоящей кнопки (на клавиатуре).
Как сделать так, чтобы ширина элемента не была больше чем высота? Как мне задать min-width если высота неизвесна?


сейчас кнопка с выглядит не реалистично, как это исправить?

<style>
* {
    font-size: 60pt;
}
p {padding: 1em;}
kbd {
    min-width: /* ??? */;
    font-family: monospace;
    color: white;
    background: black;
    padding: 0.07em;
    border-top: 0.15em solid whitesmoke;
    border-left: 0.15em solid whitesmoke;
    border-right: 0.15em solid gray;
    border-bottom: 0.15em solid gray;
    border-radius: 0.30em;
}
</style>
<p>
button <kbd>Ctrl</kbd>+<kbd>C</kbd>
</p>

Answer 1

[Сергей delphinpro]

Не совсем так, как заявлено в вопросе, но выглядит почти квадратной

kbd { 
  min-width: 1.2em;
  display: inline-block;
  text-align: center;

Comments

[RimMirK]

Спасибо!

Answer 2

[Rsa97]

kbd {
  display: inline-block;
  text-align: center;
  aspect-ratio: 1;
  height: 1.2em;
  ...
}