关于在同一行中的两个span的高度问题

遇到这么个问题，因为对前端，尤其是box高度等的理解有限，所以不知道该如何解决，有前端高手看到的话，帮忙解释下是如何导致的，感激不尽：）

html和css代码分别如下：
html代码：

 <div>
                <p>
                    <span class="kk">中国</span>
                    <span class="vv">北京</span>
                </p>    
                <p>
                    <span class="kk">日本</span>
                    <span class="vv">东京</span>
                </p>    
                <p>
                    <span class="kk">美国</span>
                    <span class="vv">华盛顿</span>
                </p>    
</div>

css代码：
span {
display:inline-block;
width:100px;
height:36px;
line-height:36px;
text-align:center;
}
span.kk {
background-color:#FFE4C4;
}
span.vv {
background-color:#8A2BE2;
}
在浏览器中的展示效果如下：

但是如果把同一行中的某一个span中的文字内容删除，例如删除第二行中的”东京“，那么在浏览器中的展示效果变成下面的了，也即两个span的水平位置不一样导致第二行的高度明显变高了：

希望有前端的高手帮忙看下：）

都不知道你希望达到个什么效果？

overflow:hidden;

<!DOCTYPE html>

Document
 p { padding: 5px; margin:0; width:200px; } <pre><code> p:after { content:""; display: block; clear:both; } span { display:block; float: left; width:100px; height:36px; line-height:36px; text-align:center; } span.kk { background-color:#FFE4C4; } span.vv { background-color:#8A2BE2; } </style> </code></pre> </head> <body> <div> 中国 日本 美国 华盛顿 </div> </body> </html>

我也遇到了这个问题。我的代码是这样的：

 <span></span>
 <span></span>

设置两个span为inline-block,设置了宽、高。给第一个span设置了一个背景图片。然后两个span就不一样高了。
最后通过百度，我是这么解决的。给两个span设置css属性：vertical-align:middle。给两个span都设置。最后一样高了
希望能帮到你哈