スパン外のテキスト、スパンのアウトラインからオフセットした

Question

私は米国憲法に触発された「We the People」ウェブサイトのセクションを作成しています。私は自分のプロジェクトをサポートする「署名者」の名前を挙げています。名前のサイズが違うので、ページにうまく表示されるようにしています。不思議なことに、フォントは名前を含むスパンから一貫してオフセットされています。ここで私が持っているものです：あなたが見ることができるように

、名前は私が避けたいのですがどの、重複しています。私は奇妙な見つけることはテキストがスパンの外にあるということです概説：

同じことがすべての名前の真実です。ここに私のHTMLです：

<div id="names"> 
     <span class="order ten CalifornyaA-Bold" id="o3">Eric So</span> &nbsp; 
     <span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span> &nbsp; 
     <span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span> &nbsp; 
     ... 
     <span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span> &nbsp; 
    </div> 

...とCSS：

#names { 
     text-align: center; 
     padding-bottom: 10%; 
    } 
    .hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten { 
     line-height: 1.5em; 
     white-space: nowrap; 
    } 
    .hancock { 
     font-size: 5.5em; 
    } 
    .five-hundred { 
     font-size: 4em; 
    } 
    .two-hundred { 
     font-size: 3.4em; 
    } 
    .one-hundred { 
     font-size: 2.8em; 
    } 
    .fifty { 
     font-size: 2.2em; 
    } 
    .twenty-five { 
     font-size: 1.6em; 
    } 
    .ten { 
     font-size: 1em; 
    } 

すべてのヘルプは非常に高く評価されるだろう！

Answer 1

そのごline-height彼らは、インライン要素が一切ブロック要素ではないことから、値が変更してみてください：

.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten { 
     line-height: 110%;//percent would be good 
     white-space: nowrap; 
    } 

を、またはすべてが1.5em
編集に設定される代わりに、それぞれに個別のCSSルールを追加します。
私はテキストを包み、フォントのページでemにフォントサイズを追加し、そのが重複していないか確認してください、あなたはemを使用しているので、親要素にフォントサイズを設定することを忘れないでください：

Answer 2

あなたはそれをdisplay: inline-block、その後はかなりよくmargin-top作品を設定しているようです

span {line-height: 1.2;} 

Answer 3

使用することができます。私はそれが少しハックの解決だと思うが、それは多かれ少なかれ動作する。