HTML/CSS Service

CSS Padding Tutorials

Category: CSS, CSS 2 Tutorial, CSS Tutorials    |    1,150 views   |   

In this tutorial you will learn about Cascading Style Sheets (CSS) Padding,

The padding is the space between the element border and the element content from the four sides, the padding attributes enables you to increase or decrease this space; unlike spacing padding space values can’t be negative.

To declare the padding you can use the following properties:
padding-top, padding-right, padding-bottom, and/or padding-left.
The values of these properties can be an absolute length, a percentage.

Example:

table
{
padding-top: 5px;
padding -right:3px;
padding -bottom: 5px;
padding -left: 2px;
}

This sets the top padding of the < table > element to 5 pixels, the right padding to 3 pixels, the bottom padding to 5 pixels, and the left padding to 2 pixels.

Using the shortcut

A shortcut property can be used to set all sides padding in one declaration; the property is “padding”, and the order is:

padding-top, then padding-right, then padding-bottom, and finally padding-left.

Example:

The previous example can be written as:

table
{
margin: 5px 3px 5px 2px;
}

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • digg
  • del.icio.us
  • Stumble it
  • Furl
  • Reddit
  • BlinkList
  • Simpy
  • YahooMyWeb
  • Spurl

Share/Save/Bookmark

1 Star2 Stars

Tags: ,

0 responses so far!

Leave a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word