按钮具有不同的基线行为

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

Temani 指向this elaborate analysis 的指针很好。

好吧，那么似乎有一个解决方案：

• 如果我避免定义height，而是将所需高度放入line-height
• 并设置vertical-align: middle（与所有标签相关除了按钮）

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

我明白了，我想要什么（顺便说一句，也是确切的高度，而不是加上其他一些基本值）