揃えトップが

Question

このjsfiddleは次のようになります。

私はそれが（私がペイントMSでこれを作成した）次のようになりたい...フラッシュ：

これを達成するためにスタイルに追加できるものはありますか？

div { 
    border: 1px solid blue; 
    font-size: 50px; // this number should be treated as arbitrary 
} 

Answer 1

1つのオプションはline-heightです。金額は使用しているフォントファミリによって異なります。利点は、line-heightがフォントサイズに直接依存することができるため、動的になることができることです。しかし、それは、垂直上下の概念を個別に（それは両方に適用される）持っていないので、テキストの下にそのスペースを持たないでしょう。

div { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
    font-family: 'Times'; 
 
    line-height: 0.7; /* This will work for any font-size on 'Times'*/ 
 
}

<div>Hello</div>

あなたはマージン下での要素のテキストをラップすることにより、その下のスペースをシミュレートすることができます。

div.outer { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
} 
 

 
div.inner { 
 
    font-family: 'Times'; 
 
    line-height: 0.7; 
 
    margin-bottom: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner">Hello</div> 
 
</div>

Answer 2

別のオプションは、相対位置を使用することです。ラインハイトよりもこのメソッドの利点は、divのサイズが変わらないことです。行の高さと同じように

div { 
 
    border:1px solid blue; 
 
    font-size: 64px; // works for arbitrary font sizes 
 
} 
 
span{ 
 
    position:relative; 
 
    top:-0.21em; 
 
}

<div> 
 
    <span>Hello</span> 
 
</div>

、あなたのフォントに応じて、 "-0.21em" を調整する必要がある場合があります。 -0.21emはサンセリフとセリフではうまく働いたが、筆記体ではなかった。