2 
<div>
    <p>Text Text Text</p>
</div>

div { 
    height: 100px;
    width: 500px;
    margin-top: 50px;
    background-color: #00f;
}

p {
    font-size: 20px;
    color: #000;
    line-height: 0;
}

ここを見てください：http://jsfiddle.net/pJCBv/

親 div の上部に対してテキスト フラッシュを揃えようとしています。line-height: 1;フォントの上下に 1 ～ 2 ピクセルを追加するため、試していline-height: 0;ます。しかし、テキストは親 div からはみ出していますか? 上部にぴったりと合わせることができれば完璧です（間に隙間はありません）。

別の質問: ブラウザはフォントをわずかに異なるものにレンダリングしますが、ピクセルの高さはすべてのブラウザで一貫していますか? たとえば、高さ 11 ピクセルの Arial は、すべてのブラウザーで高さ 11 ピクセルであることが保証されますか? この場合、line-height を 11px に設定できます。

4

4 に答える 4

2

私の意見line-height: 0では、テキスト行の高さを null に設定するため、使用はお勧めできません。

そのために絶対配置を使用します。テキストを配置するために上部マージンを調整するだけです。

div { 
    position: relative;
    height: 100px;
    width: 500px;
    margin-top: 50px;
    background-color: #00f;
}

p {
    font-size: 20px;
    color: #000;
    position: absolute;
    margin-top: -4px
}

(jsフィドル)

于 2013-08-28T03:28:38.770 に答える
1

私はMathieuの答えに同意しますが、line-heightを使用する必要がある場合は、そうしてくださいline-height: 0.8;

http://jsfiddle.net/eshellborn/8PRwa/

ちなみに、line-height は文字の下から上までの距離ではなく、テキストの 1 行から下の行までの距離です。

于 2013-08-28T03:31:35.850 に答える
0 

    div {
        height: 100px;
        width: 500px;
        margin: 50px;
        background-color: #0f0;
        display: flex;
      

    }

    p {
        font-family: impact;
        font-size: 30px;
        color: #000;
        line-height: 0;
        margin-top: calc(30px/2.5);
        padding: 0;
        display: block;
    }
  <div>
      <p>TEXT STICKING OUT FROM PARENT DIV</p>
  </div>

div 表示をフレックスに変更します。

    div {
        height: 100px;
        width: 500px;
        margin: 50px;
        background-color: #00f;
        display:flex;
        /*justify-content:center;
        align-items:center;*/

    }

    p {
        font-size: 20px;
        color: #000;
        line-height: 0;
    }
  <div>
      <p>TEXT STICKING OUT FROM PARENT DIV</p>
  </div>

于 2021-05-09T13:35:31.950 に答える