Кнопка имеет другое базовое поведение

Question

Я хочу выровнять внешний вид якорей, пролета и кнопки в определенном контексте:

Это начинается хорошо, но как только вы даете явную ширину и высоту, <button> ведет себя иначе, чем все остальные теги. Мне не хватает свойства css для выравнивания?

(опора vertical-align выглядела как решение ... пока у меня не было явной высоты ...)

HTML

main>* {
  font-size: inherit;
  font-family: sans-serif;
  color: inherit;
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  border: none;
  background: rgba(blue, .1);
  padding: 0;
  margin: 0 .1em;
  width: 60px;
  height: 100px;
  overflow: hidden;
  vertical-align: bottom
}

<main>
  <button>button</button>
  <a href='#'>anchor</a>
  <a>plain</a>
  <button>button</button>
  <span>span</span>
  <button>button</button>
</main>

→ CodePen

Answer 1

Указатель Темани на этот сложный анализ был хорошим.

Ну, тогда есть решение:

• если я воздержусь от определения height и поставлю желаемую высоту в line-height вместо
• и установите vertical-align: middle (актуально для всех тегов , кроме кнопка)

    overflow: hidden      
    width: 60px
    vertical-align: middle // button won't care, but everyone else
    line-height: 100px

Я получаю, что я хочу (также точная высота, кстати, не плюс какое-то другое базовое значение)