删除段落的顶部和底部填充？

Question

我想删除段落文本的顶部和底部填充，而不更改文本的行高。请看下面的图片，我想要顶部和底部边框，它与文本之间没有任何填充。 段落高度不固定。

HTML：

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

CSS：

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

演示： http://jsfiddle.net/Dqmu8/

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; 
}

Answer 2

你无法实现这一点而不解决line-height属性（毕竟这是导致空间的line-height）;但是，您可以专门定位line-height 仅 ::first-line伪元素：

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

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

JS Fiddle demo

不幸的是，没有::last-line伪选择器，因此只能定位第一个。

参考文献：

• ::first-line pseudo-element。