Name

padding — NN 4 IE 4 CSS 1

Synopsis

Inherited: No

A shortcut attribute that can set the padding widths of up to four edges of an element with one statement. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size. You may supply one to four space-delimited padding values. The number of values determines which sides receive the assigned padding.

CSS Syntax

padding: paddingThickness {1,4}

JavaScript Equivalent

paddings()

Value

This attribute accepts one, two, three, or four values, depending on how many and which sides you want to assign padding to. Values for paddingThickness can be lengths or percentages of the next outermost element size. Value quantities and positions are interpreted as follows:

Number of Values

Effect

1

All four padding edges set to value

2

Top and bottom padding set to the first value, right and left padding set to the second value

3

Top padding set to first value, right and left padding set to second value, bottom padding set to third value

4

Top, right, bottom, and left padding set, respectively

Initial Value

0

Example

P.highlight {padding: 10px 20px}

Applies To

All elements (CSS and NN); BODY, CAPTION, DIV, IFRAME, MARQUEE, TABLE, TD, TEXTAREA, TR, and elements (IE).

Object ...

Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.