1

テキストの高さがその行と正確に同じであることを確認する必要があります。ただし、font-size と line-height が同じ場合でも、テキストはその行よりわずかに小さくなります。フィドルを参照してください。ここでは text-transform: uppercase を使用しているため、'y' などの余分な部分がはみ出していません。それを修正する方法はありますか？

<div> Some Text</div>

div {
    display:inline-block;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    background-color: lightgreen;
    padding: 0;
    margin: 0;
}
4

3 に答える 3

3

これfont-sizeは、 がフォントの最大サイズであるためです。あなたの例でÈは、高さ全体を埋めます。したがって、アクセント付きの文字を使用する予定がない場合は、line-height.

これは良い結果をもたらすようです：

div {
  display:inline-block;
  font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
  font-size: 20px;
  line-height:15px;
  text-transform: uppercase;
  background-color: red;
  padding: 0;
  margin: 0;
}
于 2013-01-18T20:28:51.293 に答える
1

行の高さを減らしてみてください。line-height が font-size と同じ場合、テキストを大文字に変換するかどうかに関係なく、文字「y」のように、アセンダーとディセンダーの余地ができます。

http://jsfiddle.net/tracyfu/UwLm7/15/

div {
  display:inline-block;
  font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
  font-size: 20px;
  line-height: 15px;
  text-transform: uppercase;
  background-color: red;
  padding: 0;
  margin: 0;
}
于 2013-01-18T20:31:47.690 に答える
0

@mathieuは正しいです。以下を使用してごまかすことができます。

line-height: 16px;
vertical-align: text-top;
于 2013-01-18T20:32:23.477 に答える