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 中突出来？如果我能让它与顶部齐平（中间没有间距），那将是完美的。

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

4

4 回答 4

2

在我看来，使用line-height: 0不是一个好主意，因为它将文本行的高度设置为空。

我会使用绝对定位，只需调整上边距来定位文本：

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)

于 2013-08-28T03:28:38.770 回答
1

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

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

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

于 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 显示更改为 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>

于 2021-05-09T13:35:31.950 回答
0

如果可以使文本内联块，则将行高设置为零，并将边距顶部设置为零，似乎可以完美地工作，并且适用于不同的字体。因此，对于给定的问题，只需将 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>

于 2020-07-22T11:40:37.547 回答