Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Line-height for all but the first line

Line-height for all but the first line

Problem

Below, how can I add vertical whitespace where it says "increase spacing". line-height would affect the entire right box, but I want addidional whitespace only when a line inside right runs over and breaks.

enter image description here

See http://jsfiddle.net/dhT8E/

Left Text 1
Right Text 1
Left Text 2
Stacked Box 1
Stacked Box 2
Stacked Box 3
Left Text 3
Right Text 2
.box {width:350px; height:150px; border:solid} .item {padding-bottom:8px;} .left {position:absolute;} .right {padding-left:100px; padding-after:20px;} .horizontal {display: inline-block; padding-right: 20px}
Problem courtesy of: Frank Seifert

Solution

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

Solution courtesy of: Danield

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Line-height for all but the first line

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×