CSS：如何摆脱段落第一行的额外空间？

Question

将PSD转换为CSS时，PSD的line-height属性与CSS不同。

在CSS中，line-height从文本中心展开，但在Photoshop中，line-height从一行的顶部到下一行。

HTML

<div>
  <p>123436548568</p>
  <p>123436548568</p>
</div>

CSS

p{
  font-size: 20px;
  line-height: 40px;
}
div{
  background-color: grey;
}

我只是想摆脱这一部分：

Codes in CodePen

Answer 1

是的，Photoshop中使用的leading的行为与CSS中的line-height不同。您可以使用一些CSS技巧来产生相同的结果：

p {
    font-size: 20px;
    line-height: 1;       /* this makes the line box is 20px tall */
    padding-top: 0;
    padding-bottom: 20px; /* add top and bottom padding to create a gap */
}

如果结果偏离几个像素，则在顶部和底部之间分配20px填充，直到获得像素完美结果。

---

作为替代解决方案;将段落偏移几个像素顶部，以便文本顶部与框顶部对齐。即使文本在多行上分割，此解决方案仍然有效。

p {
    font-size: 20px;
    line-height: 40px;
    position: relative; /* using relative positioning */
    top: -10px;         /* shift few pixels above the normal position */
}

Demo here

Answer 2

您可以使用line-height: auto或删除line-height媒体资源

Answer 3

使用以下命令重置您的CSS：

* { margin:0; padding:0; }

或

使用浏览器的this to reset默认属性

Answer 4

在您的代码中，您可以添加一个类

.no-margin { margin: 0; }

或

p { margin: 0 }

但看起来你的行高是个问题。你需要减少它。即使在删除边距后，您的示例也不起作用，因为行高要大。第一个问题是如果你想进一步减少它。

Answer 5

文本很低，因为你为它添加了行高，不知何故，不可能设置负边距或填充原因。

Answer 6

line-height不会崩溃 - 每行都是该高度，无论之前或之后的内容如何，​​类似于任何文字处理器或DTP中的行高设置。

但是，如果使用margin垂直空格折叠，则可以将其用作之前的空格和段落之后的空格。

以下内容：

p {
    font-size: 20px;
    line-height: 30px;
    margin-top: 5px;
    margin-bottom: 10px;
}

将产生：

• 20px字体大小
• 1.5行高
• 第一段前的5px空间
• 在段落之后的10px空格和段落之间的

还有：

• 第一个边距将在外部div
之前应用
• 最后一个边距将在外div
之后应用