css - 按钮具有不同的基线行为

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>

→ 代码笔

标签： csshtml

Answer 1

Temani 对这一详尽分析的指导是一个很好的分析。

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

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

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

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