如何去除段落的顶部和底部间距？

Question

我想去掉段落文本的上下填充，而不改变文本的行高。请参见下面的图片，我希望上下边框与文本之间没有任何填充。
段落高度不固定。

HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

CSS：

p{
    width: 200px;
    line-height: 2.2;
    border: 1px solid red;   
}

Demo: http://jsfiddle.net/Dqmu8/

- user966582

---

这个空间的大小直接受到“行高”的影响，顺便提一下，“边距”空间会出现在“边框”的外面，而是“内边距”出现在边框的里面。 - David Thomas

您的 jsfiddle 中没有任何 <p> 标签。 - Oded

抱歉，我更新了链接。 - user966582

Answer 1

您可以将其包装在 div 中，然后给它一个负边距 DEMO http://jsfiddle.net/kevinPHPkevin/Dqmu8/7/

p{
    line-height: 2.2;
    margin:-10px 0 -10px 0;
}
div{
    width: 200px;
    border: 1px solid red; 
}

- Kevin Lynch

---

你能证明吗？因为就我所知，它并没有（Fiddle）。顺便说一下，他的 ul 已经指定了 padding: 0，这是继承的（尽管他在 Fiddle 中也没有 p）。 - David Thomas

他没有填充，这对解决问题没有任何帮助。而且，你用了两行代码来做同样的事情？糟糕的代码！下次尝试使用 padding:0 ... - PlantTheIdea

我正在回答你在这个页面上的问题。那个小提琴是一个不同的问题，不包含<p>或填充。 - Kevin Lynch

你的小提琴问题是由于行高引起的。这就是行高的作用，它是一种手动设置文本行高度以便换行等目的的方式。实际可见大小由字体大小和字体族系的影响较小。正常文本/字体的平均行高约为1.2em。任何大于此值的行高都会导致可见的信封效果，这正是你所描述的情况。唯一解决你的问题的方法是引入更多标记来确定行号，以便你可以不同地为第一/最后一行设置样式。 - Kevin Lynch

向量，抱歉我发布了错误的URL，但无论是<p>还是<li>都没有关系，问题是如何从顶部和底部行中删除空格。 - user966582

谢谢你的回答，非常好。我只想说，你不能使用负填充。 - user966582

Answer 2

如果您不处理line-height属性（毕竟是line-height导致了空格），则无法实现此操作；但是，您可以专门针对::first-line伪元素的line-height进行定位：

p{
    width: 200px;
    line-height: 2.2;
    border: 1px solid red;
    padding: 0;
}

p::first-line {
    line-height: 1em;
}

JS Fiddle演示。

很遗憾，没有::last-line伪选择器，因此只能针对第一行进行定位。

参考资料：

• ::first-line伪元素。

- David Thomas

---

另外一个需要注意的是，::first-line 在 IE8 或之前的版本中不起作用。 - j08691

MDN与quirksmode有不同的看法。https://developer.mozilla.org/en-US/docs/CSS/::first-line - j08691

@user966582：是的，但是可靠地吗？我认为你需要JavaScript来确定哪些文本在哪一行（除非你将每行文本都包装到span或div元素中，并使用display: block或类似的东西？）。 - David Thomas

再次感谢您，大卫。我认为Vector的答案解决了这个问题。 - user966582

@DavidThomas和OP：p:first-line {line-height:1em}似乎不适用于IE8和Fx20。PPK只测试了这个伪选择器中是否应用了颜色，而没有测试CSS2.1中写入的整个（最小）属性范围。以下CSS属性适用于::first-line伪元素：字体属性、颜色属性、背景属性、“word-spacing”、“letter-spacing”、“text-decoration”、“vertical-align”、“text-transform”、“line-height”。UA也可能应用其他属性。 - FelipeAls