Line-Height Affecting Spacing Above First Line and After Last Line

Line-height affecting spacing above first line and after last line

You can use negative margins for this, although there is something to keep in mind:

line-height is a funny thing. According to CSS2.1 it doesn't specify the line-height but the minimum height of line-blocks:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

A line box is defined in 9.4.2 Inline formatting contexts:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

This doesn't change in CSS3 very much, at least if you don't change the line-stacking. However, there is no property which targets your problem directly: you can't change the line-height of the ::first-line, it will always get applied.

That said, use negative margins for the time being. Even better, wrap your elements in a generic container. By using :first-child and :last-child you can add as many elements as you like.

Example

<div>
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>    
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
</div>

body {padding:30px;background:yellow;border:1px solid red;margin:0}
div{background:red;margin:0;padding:0;border:1px solid green;}
h1{line-height:2em;}
div > h1:first-child{
    margin-top:-.25em;
}
div > h1:last-child{
    margin-bottom:-.25em;
}

Adding line-height before each line only with CSS

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

Line-height for all but the first line

line-height is what you need.

.box {
   line-height: 26px; /* adjust to your needs */
}

True,

line-height would affect the entire right box

... but to fix that up - just remove / change the bottom padding on your items.

FIDDLE

Remove line-height from first line

You may also use a pseudo element with a vertical negative margin equal to the line-height to mimic a line-height:0; at first line.It will pull content upwards:

body {  margin: 0;  padding: 0;}.test {  font-family: "verdana";  font-size: 25px;  line-height: 150px;  background: yellow;}p:before {  content: '';  display: block;  margin: -3em 0;/* 25px = 1em/font-size  150/25 = 6 . margin-top/bottom -3em = 6em */}

<p class="test" align="justify">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare odio metus, ut volutpat turpis mollis id. Aliquam sed risus congue, pulvinar erat a, fringilla ipsum. Duis posuere facilisis mauris vel fringilla. Etiam vel urna pharetra, vestibulum  lectus eget, semper velit. Morbi eget nibh fringilla, hendrerit sem sollicitudin, aliquam enim. Quisque pulvinar felis vel lacinia cursus. Sed ullamcorper nisi nec sapien aliquet, et consequat nibh ultricies. Nullam et faucibus ante. Nam nec lectus  varius, gravida purus et, faucibus justo.</p>

Line height doesn't affect first line in contenteditable

Despite what is mentioned in the other answer(s), it is not really an issue with <br>. The actual issue is with Chrome - specifically how it processes text on line-height greater than its own height. This Chrome line-height issue is actually a longstanding source of irritation for many of us doing CSS. The caret always span the entire line-height, and the text is not vertically middle of the line-height. To make it worse, they treat the first line different from the rest other lines :(

The suggestion on <br> is a hack to mask the problem, but it only works if you are going to manually input line breaks in the text area. Just to demonstrate that the br hack method won't work for regular textareas / contenteditable regions with naturally occurring wrapping text: http://jsfiddle.net/8ao367gz/1/

The Bad News: There is no real solution to it as yet. The general consensus is to find a way around your design and don't set line-height to anything other than normal or 1. If you must use line-height in the design, either live with the weird-looking bottom-aligned caret spanning the entire line-height on Chrome, or tell your users to use another browser without this issue (like Firefox). Or we can all continually complain and submit bug reports to Chrome and pray that they "fix" this. I highly doubt so, since I don't think they consider this a bug; and even if they do, probably a very low priority one.

Why can't I decrease the line-height of this text?

Because the em tag is inline and its line-height cannot be lower than its parent div.

For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.

How LineSpace Affects StaticLayout Height in One Line Text

I did some quick digging in the source code, seems to be that this part is the culprit:

    if (needMultiply && !lastLine) {
        double ex = (below - above) * (spacingmult - 1) + spacingadd;
        if (ex >= 0) {
            extra = (int)(ex + EXTRA_ROUNDING);
        } else {
            extra = -(int)(-ex + EXTRA_ROUNDING);
        }
    } else {
        extra = 0;
    }

Older versions are missing the !lastLine condition and thus also add the spacing to the last line.

The condition was added in this commit, which, if my github foo doesn't fail me, should be included starting with Android 5.

Apparently, just like the commit mentions, this only affects single line texts, for multiline texts the height seems to be calculated correctly. So an easy fix might be to check whether the text only has a single line (using getLineCount()) and if the Android version is less than 5, and if so substract the line spacing once.

---

Related Topics