html - 取り外しできない大きな底のパディング

Question

ここの下部にテキストの大きなスペースがあります：http：//jsfiddle.net/qHaFR/

そして、私はそれを削除することができません。

やり方を教えていただけますか？

Answer 1

この場合のラッパーは、<span>幅と高さが定義されたブロック要素である必要があります。また、コンテナの高さに一致するように行の高さを変更する必要があります。

したがって、あなたのスタイルは次のようになります。

#foo {
   background-color:yellow;
   font-size:260px;
   border:1px solid black;
   width: 190px; /* if display: block; */
   line-height: 200px;
   display: block; /* or inline-block */
}

明確にするために、Aなどの要素をラップしようとしていたのか、<div>それともすでにブロックされているために<h1>宣言する必要はないのか。display: blockdivh1

Answer 2

なぜなら、line-height各キャラクターをそこに表示できるようにするために、実際にはそれが非常に大きいからです。一部の言語では、そのスペースが完全に使用されます。たとえば、と入力するとÁĄ、260px全体が必要になります。これらの文字を表示できなくても問題がない場合は、line-heightそれに応じて変更し、ブロックとして表示する必要があります。

#foo
{
    background-color: yellow;
    font-size: 260px;
    border: 1px solid black;
    line-height: 200px;
    display: block; /* or inline-block */  
}​

ブロックとして扱うことに問題がある場合（幅が100％になるか、自分で設定する必要があります）、を使用しますdisplay: inline-block;。また、ÁĄ代わりに入力Aして、文字の上下がカットされていることを確認してください。ここで、これを参照してください：http: //jsfiddle.net/vmVcr/。