Javascript 为什么一个内联块元素略高于其他元素

首先。我正在创建一个数学方程游戏，你应该猜方程中缺少的运算符。操作符是使用javascript插入的图像，当其中一个操作符图像插入到带有一个数学框类的div中时，div会比所有其他div标记稍微高一些。我试图弄明白为什么会这样，我想我有一个解决方案，让所有的数学框类都在相同的高度水平上，那就是通过浮动。但是，我真的想知道为什么它比其他的都高

window.onload=函数{ var eq=document.getElementById‘等式’， op=document.getElementById'operator'， btn=document.getElementsByTagName“按钮”[0]； btn.onclick=函数{ /* var倒计时=setIntervalfunction{ var timer=document.querySelector'container h1'； var count=parseInttimer.innerHTML； 计数-； ifcount<1{ clearIntervalcountdown； timer.innerHTML=0； 计数=30； }否则{ timer.innerHTML=计数； } },1000 */ var param=Math.roundMath.random*3-1+1， 操作数=[]，数值=[]， 方程=，结果=， mathBox=，div=， 跳过，回答， add=document.getElementById'add'， sub=document.getElementById'sub'， divi=document.getElementById'div'， multi=document.getElementById'mul'， mathAnswer=document.getElementById'answer'； mathAnswer.innerHTML=； 对于变量i=0；i试试这个

请提供一个JSFiddle，我无法正确调整您提供的链接的大小。谢谢这项工作，所以垂直对齐水平内联块或块元素的高度？我不擅长解释，所以请检查一下以供参考：另外，我编辑了我的答案，因为我认为这是更好的方法。谢谢

.math-box {
 vertical-align: top;
}