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

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-heightline-heightline-height::first-line

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

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

JS 小提琴演示。

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

参考：

• ::first-line伪元素。