html - span将相邻的span向下推

This question already has answers here:

My inline-block elements are not lining up properly
                                
                                    （5个答案）
                                
                        
                                4年前关闭。
            
                    
的HTML

<span class="symbol">$</span>
<span class="value">400</span>

这将同时显示“ $”和“ 400”。

我添加的那一刻

的CSS

.symbol {
    font-size: 2em;
}

然后，将“ 400”向下推。

问题：为什么对“ $ / .value”进行更改会影响“ 400 / .symbol”？

谢谢。

http://codepen.io/anon/pen/emLLrm

最佳答案

这个问题实际上是关于垂直对齐的，可以使用以下方法解决

vertical-align:middle

要么

vertical-align:top;

覆盖默认基线（默认情况下设置为底部）。



演示：

.symbol {
  font-size: 2em;
  vertical-align:middle;
}

<span class="symbol">$</span>
<span class="value">400</span>

关于html - span将相邻的span向下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28946503/