CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152807

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

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 (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below.

I know it's a behavior of Line-height. but just curious if there is any good solution for this.

This is just en example to what I'm asking.

Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/

enter image description here

Upvotes: 17

Views: 17856

Answers (1)

Zeta
Zeta

Reputation: 105925

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.

The wording changes slightly in CSS3, but the result is still the same: 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;
}

Upvotes: 14

Related Questions