CSS3 Examples: CSS Padding

CSS PADDING-LEFT

Written by jon on 11:45 PM

This property controls the size of the left padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-left: 3em }

<blockquote style=”padding-left: 3em”>This is some text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	Refers to a percentage of the width of the current element's containing block.

| Posted in » CSS Padding

CSS PADDING-BOTTOM

Written by jon on 11:43 PM

This property controls the size of the bottom padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-bottom: 3em }

<blockquote style=”padding-bottom: 3em”>This is some text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	Refers to a percentage of the width of the current element's containing block.

| Posted in » CSS Padding

CSS PADDING-RIGHT

Written by jon on 11:42 PM

This property controls the size of the right padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-right: 3em }

<blockquote style=”padding-right: 3em”>This is some text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	Refers to a percentage of the width of the current element's containing block.

| Posted in » CSS Padding

CSS PADDING-TOP

Written by jon on 11:40 PM

This property controls the size of the top padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-top: 3em }

<blockquote style=”padding-top: 3em”>This is some text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	Refers to a percentage of the width of the current element's containing block.

| Posted in » CSS Padding

CSS Padding

Written by jon on 7:12 AM

This is a shorthand property which allows an author to specify ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides. The rendered surface of the padding area is taken from the ‘background’ property.

Example

body { padding: 5px 5px 2px 25px }

<body style=”padding: 5px 5px 2px 25px”>this is some content</body>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	Refers to a percentage of the width of the current element's containing block.

| Posted in » CSS Padding

Subscribe to: Posts (Atom)