Set the Line Spacing

By Stephen Bucaro

You might set the line spacing different than the default setting when you need the text to fill a predefined area. Use the line-height property to set the space between lines. You can increase or decrease the line spacing.

Shown below is the default spacing between lines.

This is the default spacing between lines.
This is the default spacing between lines.
This is the default spacing between lines.

Shown below is the Line-height set to 8 pixels. Obviously this is a bit to small, but it's just an example.

<p style="line-height:8px;">
This is decreased spacing between lines.<br />
This is decreased spacing between lines.<br />
This is decreased spacing between lines.</p>

This is decreased spacing between lines.
This is decreased spacing between lines.
This is decreased spacing between lines.

Shown below is the Line-height set to 30 pixels. This might be a bit to much line spacing.

<p style="line-height:30px;">
This is increased spacing between lines.<br />
This is increased spacing between lines.<br />
This is increased spacing between lines.</p>

This is increased spacing between lines.
This is increased spacing between lines.
This is increased spacing between lines.

You might set the line spacing different than the default setting when you need the text to fill a predefined area. But since you may not know the default spacing between lines, you may need to experiment with different values.

More CSS Quick Reference:
• Set a Background Image's Position
• Set the Border Color
• Set the Text Alignment
• Set the Font Size
• Pseudo-class Selectors
• Set the Font Slant
• Use an Embedded Style Sheet
• Set an Element's Display Property
• Specifying Color
• Set the Type of Bullet Used in List

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues