span将相邻的跨度向下推

Question

HTML

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

这显示＆＃34; $＆＃34;和＆＃34; 400＆＃34;在同一水平。

我添加的那一刻

CSS

.symbol {
    font-size: 2em;
}

然后，＆＃34; 400＆＃34;被推倒了。

问题：为什么＆＃34; 400 / .value＆＃34;受＆＃34; $ / .symbol＆＃34;的变化影响？

感谢。

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

Answer 1

这个问题实际上是关于垂直对齐，可以使用

来解决

vertical-align:middle

或

vertical-align:top;

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

---

<强>演示：

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

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

Answer 2

此外，如果您想要更多地控制与数字相关的定位，请使用符号上的position:relative和top:来定位您喜欢的位置。例如：

.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}