空スパンは他のスパンを上に移動します

Question

<span style="float:left; padding-right: 5px;"> 
    <span style="display:block;">Harvard</span> 
    <span>John Smith</span> 
    </span> 

    <span style="float:left; padding-right: 5px;"> 
    <span style="display:block;">Chicago</span> 
    <span>Tucker Max</span> 
    </span> 

    <span style="float:left; padding-right: 5px;"> 
    <span style="display:block;"></span> 
    <span>Rihanna</span> 
    </span> 

    <span style="float:left; padding-right: 5px;"> 
    <span style="display:block;">NYU</span> 
    <span>Peter Simpson</span> 
    </span> 
//... and many more 

最初のスパンには大学が含まれ、2番目のスパンにはその人の名前が含まれます。今私の問題は、私がuniに行かなかった人がいるときは、ただ空白のままにしたいということです。

しかし、私がそれをすると、人の名前は上に移動し、もう他の名前と一致しません。だから私の例では、リアーナは上に移動：

私は-またはno uniような何かを書くことができますが、私はずっとそのわずかもっときちんととして、そこに空白のフィールドを持っていることを好むだろう。私はCSSベースのソリューションを持つことを好むでしょう。

編集：もし人々がこれをdownvoteすれば、少なくとも私になぜ教えてください。

Answer 1

<span style="float:left; padding-right: 5px;"> 
    <span style="visibility:hidden;">&nbsp</span><!-- Change is in this line --> 
    <span>Rihanna</span> 
</span> 

「可視性：非表示」スタイルを使用できます。このようにして、要素を非表示にしながら、スパンからの高さ/幅が引き続き使用されます。