使用行高对框和基线进行稳健的垂直对齐？

Question

当在一行中的元素上设置相同的 line-height、height 和 box-sizing: border-box 时，我希望它们正确垂直对齐（在基线和框处）。

运气不好：对于 input/span and/or with-border/without-border 的某些组合，对齐似乎总是偏离一个像素。

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    height: 22px;
    line-height: 22px;
    
    border: none;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
}
input {
    background-color: #A6A6A6;
}

.border {
    border: 1px solid black;
}

.vmiddle {
    vertical-align: middle;
}


p {
    margin: 5px;
}

<h4>Two spans</h4>
One span has border - fail...
<p><span>_asd_</span><span class="border">_asd_</span></p>
One span has border - fail...
<p><span class="border">_asd_</span><span>_asd_</span></p>
Both spans have border - success
<p><span class="border">_asd_</span><span class="border">_asd_</span></p>

<h4>One input, one span - not the same</h4>
No borders - success
<p><input type="text" value="_asd_"/><span>_asd_</span></p>
span has border - fail...
<p><input type="text" value="_asd_"/><span class="border">_asd_</span></p>
input has border - success ...
<p><input type="text" value="_asd_" class="border"/><span>_asd_</span></p>
Both elements have border - fail :(
<p><input type="text" value="_asd_" class="border"/><span class="border">_asd_</span></p>
vertical-align: middle messes up baseline alignment
<p><input type="text" value="_asd_" class="border vmiddle"/><span class="border vmiddle">_asd_</span></p>

（在 chrome 中测试 - 在其他浏览器中似乎有所不同）

我是不是遗漏了一些明显的东西，或者没有好的通用解决方案？我不想使用填充，因为它有自己的一系列挑战。

似乎像素 above/below 基线的分布因元素类型和元素是否有边框而异。我可以理解混合边界的情况，但输入与跨度的行为方式不同，这真的很烦人。（见 span-input，都带边框）

Answer 1

你的盒子太少了

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;

    height: 24px; /* Note this correction */
    line-height: 22px;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
    border: 1px solid black;
    vertical-align: middle;
}
input {
    background-color: #A6A6A6;
}

<h4>One input, one span - the same ;-)</h4>
vertical-align: middle messes up baseline alignment

<p>
  <input value="_asd_" type="text">
  <span>_asd_</span>
</p>

Answer 2

好的，

我认为这段代码可以解决您的问题。我只是简单地使用了与背景颜色相同的边框。

谢谢，再见，
贾科莫

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    height: 24px;  /* First correction */
    line-height: 22px;
    
    border: none;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
}
input {
    background-color: #A6A6A6;
}

.border {
    border: 1px solid black;
}

.border2 {
    border: 1px solid gray; /* Second correction */
}

.vmiddle {
    vertical-align: middle;
}


p {
    margin: 5px;
}

<h4>Two spans</h4>
One span has border - fail...
<p><span class="border2">_asd_</span><span class="border">_asd_</span></p>
One span has border - fail...
<p><span class="border">_asd_</span><span class="border2">_asd_</span></p>
Both spans have border - success
<p><span class="border">_asd_</span><span class="border">_asd_</span></p>

<h4>One input, one span - not the same</h4>
No borders - success
<p><input type="text" value="_asd_"/><span class="border2">_asd_</span></p>
span has border - fail...
<p><input type="text" value="_asd_"/><span class="border">_asd_</span></p>
input has border - success ...
<p><input type="text" value="_asd_" class="border"/><span class="border2">_asd_</span></p>
Both elements have border - fail :(
<p><input type="text" value="_asd_" class="border"/><span class="border">_asd_</span></p>
vertical-align: middle messes up baseline alignment
<p><input type="text" value="_asd_" class="border vmiddle"/><span class="border vmiddle">_asd_</span></p>

使用行高对框和基线进行稳健的垂直对齐？

Robust vertical alignment of both box and baseline using line-height?

css

vertical-alignment