Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Padded Content

Problem You want to put extra space around content to emphasize it and set it apart.^

Solutions Inline Padded Content

You can use padding-left and padding-right to pad the left and right of an inline element.

This pads the beginning and end of the element—not each line spanned by the element.

Padding the top and bottom does not affect the height of an inline element, but you can use

line-height to change the height of each line spanned by the element. You cannot add

space above just the first line and below just the last line spanned by the element.

Blocked Padded Content

You can use display:block to display an inline element as a block. This lets you use

padding-left and padding-right to indent the left and right sides of all lines—not just the

beginning of the first line and the end of the last. This lets you use padding-top and

padding-bottom to add space above the top of the element and below the bottom of the

element. You can also use line-height to change the height of each line in the element.

Patterns Inline Padded Content

INLINE-SELECTOR { padding-left:+VALUE;

padding-right:+VALUE;

line-height:+VALUE; }

Blocked Padded Content

INLINE-SELECTOR { display:block;

padding-left:+VALUE;

padding-right:+VALUE;

padding-top:+VALUE;

padding-bottom:+VALUE;

line-height:+VALUE; }

Location This pattern applies to any inline element.

Limitations
line-height is used to pad the height of lines because padding-top and padding-bottom
have no effect on the height of a line.

Tips

Padding is colored using the background-color or background-image. If you want

transparent space around the element, use margin instead. If you want a different color or

pattern than the background, use border instead.

Related to Inline Spacer^