Question

<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/

我正在尝试将文本flush与父div的顶部对齐。 line-height: 1;在字体上方和下方添加1-2个像素，这就是我尝试line-height: 0;的原因。但是那时文本从父div中伸出来了吗？如果我可以将它与顶部齐平（两者之间没有间距），那将是完美的。

另一个问题：浏览器渲染字体略有不同，但所有浏览器的像素高度是否一致？例如，在所有浏览器中，将11px高的Will Arial保证为11px高吗？如果是这种情况，那么我可以设置行高等于11px。

Answer 1

在我看来，使用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
}

(jsFiddle)

Answer 2

我同意Mathieu的回答，但如果你必须使用行高，请line-height: 0.8;

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

顺便说一句，行高不是从字符底部到顶部的距离，而是从一行文本到下一行的距离。

Answer 3

如果可以将文本插入行内，则可以将行高设置为零，将margin-top设置为零，这似乎可以完美地用于不同的字体。因此，对于给定的问题，只需将p css更改为：

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

p {
    font-size: 20px;
    color: #000;
    line-height: 0;
    display:inline-block;
    margin-top:0em;
}

<div>
    <p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>

Answer 4

    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 显示改为 flex：

    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>

{line-height：0;导致文本从父div中伸出？

4 个答案: