为什么<a>具有<button>相同 css 属性的标记看起来不同？

Question

这个问题太简单了，我很惊讶我仍然在为此苦苦挣扎。在下面的代码片段中，我设置了 css 属性，以便在检查元素时，计算的 css 属性对于a和button元素都是相同的，但文本对齐方式仍然不同。

a,
button {
appearance: button;
box-sizing: border-box;
background: orange;
height: 40px;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 4px;
border: none;
font-size: 16px;
font-family: serif;
cursor: pointer;
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: black;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: center;
align-items: flex-start;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400;
-webkit-border-image: none;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>

这种差异是由于其中一个元素的某些默认属性在计算的 css 属性列表中不可见吗？我研究了MDN和W3Schools，但没有找到答案。

编辑：我知道如何对齐文本(例如，与line-height: 32px;)，但我有兴趣知道为什么片段中的元素不同。我稍微改变了原来的问题以反映这一点。

编辑2：对于那些只是在寻找对齐问题解决方案的人，这里有清理的示例如何使用line-height和几个答案中提出的inline-flex进行对齐。为什么需要这些修复程序仍然没有答案。

a,
button {
box-sizing: border-box;
background: orange;
height: 40px;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 4px;
border: none;
font-size: 12px;
font-family: serif;
cursor: pointer;
}
.lineheight-fix {
background: lightgreen;
/* line-height must be the height minus padding */
line-height: calc(40px - 2 * 4px);
}
.flex-fix {
background: lightgray;
display: inline-flex;
flex-direction: column;
justify-content: center;
}

Original unaligned: <button type="button">Click Me!</button>
<a type="button">Click Me!</a>
<br /><br />
Line-height fix: <button type="button" class="lineheight-fix">Click Me!</button>
<a type="button" class="lineheight-fix">Click Me!</a>
<br /><br />
Inline-flex fix: <button type="button" class="flex-fix">Click Me!</button>
<a type="button" class="flex-fix">Click Me!</a>

Answer 1

也许是有用的放置按钮，没有默认样式，全部：取消设置和将显示内联块更改为 flex 元素。

button,
a{
all: unset;
display: inline-flex;
flex-direction:column;
align-items: center;
justify-content: center;
cursor:pointer;

appearance: button;
box-sizing: border-box;
background: orange;
height: 40px;
margin: 0;
padding: 4px;
border: none;
font-size: 16px;
font-family: serif;
cursor: pointer;
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: black;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: center;
align-items: flex-start;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400;
-webkit-border-image: none;
}

<button>Click Button</button>
or
<a>Click Link</a>

Answer 2

一种方法是将display: inline-flex; flex-direction: column; justify-content: center;添加到 css 规则中以使文本垂直居中：

(PS：您可以删除您添加的许多其他设置 - 见下文 - 它们在这里没有效果)

a,
button{
box-sizing: border-box;
background: orange;
height: 40px;
padding: 4px;
border: none;
font-size: 16px;
font-family: serif;
cursor: pointer;
color: black;
display: inline-flex;
flex-direction: column;
justify-content: center;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>

Answer 3

行高解决方案

在flexbox成为标准之前，我们依靠line-height和vertical-align。line-height与font-size有直接关系，甚至在速记属性字体中还有一个替代符号 - 例如。

图一

html {
font: 2ch/1.2 'Segoe UI';
}

1.2 表示line-height是font-size的 1.2 倍，这使得它成为 2.4ch，上下留下 0.1ch。默认情况下，文本在基线处垂直对齐(由于升序、降序等原因，文本不完全居中)。请注意，line-height不是一个因素，除非font-size很大，并且其父级的高度已经或接近超过，或者有多个文本行。

此解决方案依赖于固定高度(有一些方法可以解决这个问题，但这超出了OP的范围)，并且标签必须inline或inline-block。将line-height和height设置为相同的值，然后将vertical-align设置为middle。

图二

a {
display: inline-block;
height: 40px;
line-height: 2.5; /* Default font-size is 16px */
vertical-align: middle;
}

弹性解决方案

这种解决方案是可能的，因为当displayflex或inline-flex时，<button>和<a>是柔性容器。与<div>不同，<button>和<a>具有冲突的性质，这些性质在使用flex之前并不明显。align-items的默认属性处于休眠状态，直到<button>或<a>对其应用flex或inline-flex。

图 III显示了锚点和按钮的原始样式以及替换和/或添加它们的样式。

图三

对两者的更改style="text-align： left;">align-items: centerstyle="text-align： left;">box-sizing: content-box

<a>nchor	<button>
align-items: flex-start	justify-content: center;align-items: center;
box-sizing: border-box	box-sizing: border-box❊

删除高度：40px，你应该已经准备好了

a,
button {
appearance: button;
box-sizing: border-box;
background: orange;

display: inline-block;
vertical-align: middle;
margin: 0;
padding: 4px;
border: none;
font-size: 16px;
font-family: serif;
cursor: pointer;
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: black;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: center;
align-items: flex-start;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400;
-webkit-border-image: none;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>