CODEWITHSUNDEEP
htmlcss
CmdrMoozy
CmdrMoozy

Reputation: 3941

Adding line-height before each line only with CSS

I'm trying to write some CSS which increases the spacing between lines of text. Obviously, this is done with the CSS line-height property. However, as I'd like to apply the same text styles to everything (in an effort to minimize "special case" styles), I want this property to ONLY apply if the text is long enough to wrap onto multiple lines.

I've very nearly got this working the way I'd like, using something like this:

p
{
    line-height: 2em;
}

p:first-line
{
    line-height: normal;
}

The only outstanding problem is that, because increasing line-height adds space both above and below each line, and because the first line's line-height is normal, the spacing between lines 1 and 2 and between any two following lines appears different.

How can I increase line-height, such that the extra space appears only above each line? I figured vertical-align: bottom; might do it, but no luck.

I've made a fiddle to experiment with this here.

To help make what I'm looking for a bit more clear, here are some pictures. This is what I get when I simply apply line-height: 2em; to p tags:

line-height result

Whereas this is what I want to achieve - notice that the extra space appears only between lines, not before or after them:

what I'm trying to achieve

Achieving this via using line-height and then adjusting for the space before the first line and after the last line with negative margins doesn't really do what I wan't; it's a bit of a hack, and if the paragraph has any other styling (like a border, or a background color, or etc.) then it becomes apparent that the lines of text are still too large, and the paragraph itself has simply been set to allow things to overlap that extra space.

Upvotes: 2

Views: 2643

Answers (2)

Eric H.
Eric H.

Reputation: 7014

Hmmm... I don't think it's possible with line-height, ie i don't think you can control this with the line-height css property exclusively. You don't have control over line-height above vs below. See this similar question if you haven't already.

I think the best thing to do is use a div wrapper. That way you can put any necessary borders on without them being obscured. If you use that in combination with an inner wrapper with negative top and bottom margins, you can achieve the result you desire (See here for full example.):

<div class="container"><p class="increased">
<span class="line">This is a really long line that will wrap inside this particular div a couple of times to demonstrate "uneven" line spacing.</span>
</p></div>

 div {
background-color: #CCC;
width: 300px;
}
.container {
border:1px solid black;
margin:0px;
padding:0px;
margin-bottom:5px;
}
.increased {
margin-top:-1.4em;
margin-bottom:-1.4em;
padding:0px;
}
.line {
     line-height: 4em;
   background-color: #FFC;
 }
.increased:first-line {
color:blue;
line-height:normal;
}

Upvotes: 3

Tims
Tims

Reputation: 2007

To remove the extra space above only the first line use 

p {
  margin-top: -1.8em;
}

Upvotes: 0

Related Questions