垂直文本间距,段落上方和下方没有额外空格

时间:2014-05-27 11:25:36

标签: css css3

由于我想要一些像素完美对齐我的文本,我正在寻找一种方法来确定上升器和前一个元素之间的空间以及基线和下一个元素之间的间距。

此示例通过将字体点与行高像素匹配,完美展示了我希望段落与其他元素之间的间距。

p {
    font-family: arial;
    font-size: 25pt;
    line-height: 25px;
    margin: 20px 0;
}

http://jsfiddle.net/3v9ms/

div和段落之间有完美的间距,两段之间也有完美的间距。但是段落行之间的间距现在为0.我希望它是25px。

但是当我增加行高时,这也会在段落的顶部和底部创造更多的空间,导致从上升/基线到上一个/下一个元素的间距变得无序。

p {
    font-family: arial;
    font-size: 25pt;
    line-height: 50px;
    margin: 20px 0;
}

http://jsfiddle.net/gC3Mx/

如何设置段落行之间的间距而不向其顶部或底部添加间距?

我已经在段落上尝试了负边距,但它使它变得讨厌,因为当你改变元素的顺序时它会产生几乎不可读的CSS和奇怪的效果(例如当我在段落上使用负顶部和底部边距时,这会让人感到困惑当我在彼此之后做两个段落但是当我在其间有另一个元素时效果很好。

1 个答案:

答案 0 :(得分:0)

我认为这是一种不好的做法,但是你可以通过使用来获得理想的结果 p:first-line

检查这个jsfiddle http://jsfiddle.net/gC3Mx/1/