Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Spacing and Areas : Page 18

Learn to use proper spacing and make good use of your Web pages.


advertisement
Padding Top
{padding-top: XXunits/%}
The padding-top property lets you set the top padding width of an element's content area.

Padding width can be specified using absolute or relative units. Relative units calculate the top padding width using the height of the element's containing block. It is illegal to use negative values for padding widths.

Example:



H1 {padding-top: 7em}

If you are using a CSS-enabled browser, this headline has 7-em-tall top padding.



Padding Right
{padding-right: XXunits/%}
The padding-right property lets you set the right padding width of an element's content area.

Padding width can be specified using absolute or relative units. Relative units calculate the right padding width using the width of the element's containing block. It is illegal to use negative values for padding widths.

Example:

H1 {padding-right: 1in}

If you are using a CSS-enabled browser, this headline has 1-inch-wide right padding.



Padding Bottom
{padding-bottom: XXunits/%}
The padding-bottom property lets you set the bottom padding width of an element's content area.

Padding width can be specified using absolute or relative units. Relative units calculate the bottom padding width using the height of the element's containing block. It is illegal to use negative values for padding widths.

Example:

H1 {padding-bottom: 50pt}

If you are using a CSS-enabled browser, this headline has 50-point-tall bottom padding.



Padding Left
{padding-left: XXunits/%}
The padding-left property lets you set the left padding width of an element's content area.

Padding width can be specified using absolute or relative units. Relative units calculate the left padding width using the width of the element's containing block. It is illegal to use negative values for padding widths.

Example:

H1 {padding-left: 5cm}

If you are using a CSS-enabled browser, this headline has 5-centimeter-wide left padding.



Padding
{padding: XXunits/%}
The padding property lets you set the padding width of all four sides of a content area simultaneously.

Padding is the space between an element's content area and its border. Padding is not transparent, the padding area uses the element's background as its background. Padding width can be specified using absolute or relative units. Relative units calculate the padding width using the width of the element's containing block. It is illegal to use negative values for padding widths.

You can enter one to four values to set different widths for different sides of the content area. If there is one value, all four sides are the same width. If there are two values, the first value sets the top and bottom padding widths, and the second value sets the left and right padding widths. If there are three values, the first value sets the top padding width, the second sets the left and right padding widths, and the third sets the bottom padding widths. If there are four values, the first sets the top padding width, the second the right padding width, the third the bottom padding width, and the fourth the left padding width.

Example:

H1 {padding: 30px}

If you are using a CSS-enabled browser, this headline is surrounded by 30-pixel-wide padding.




H1 {padding: .25cm 1.5cm 3m 5cm}

If you are using a CSS-enabled browser, this headline has 1-centimeter-wide top padding, 2 centimeter wide right padding, 3-centimeter-wide bottom padding, and 4-centimeter-wide left padding.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap