按钮具有不同的基线行为

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

我得到了我想要的东西（也是确切的身高，不包括其他一些基本值）