This site is dedicated to all things I see and that I think are interesting to publish almost always are other very smart people.

CSS Tutorial:Padding

As we saw from the box model, padding is the space just outside the content area, and just inside the border area. In a box, there are four sides. So, we can specify paddings up to the 4 sides, plus a general padding property:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-leftA fifth property, padding, is used as a shortcut for the above four properties.

    paddings can be specified in 3 ways: length, percentage, or auto. Let’s take a look at an example:

    #container {
    padding-top:15px;
    padding-left:5px;
    padding-right:30px;
    padding-bottom:40px;
    border: 1px solid 000000;
    }

    The following HTML

    <div id=”container”>
    This is an example for the padding
    </div>

    renders the following:

    This is an example for the padding

    Notice the padding between the box and the top, left, bottom, and right of the light green area are 15px, 5px, 40px, and 30px, respectively.

    padding shortcuts

    All four paddings can be specified on a single line using the “padding” property. The syntax is as follows:

    padding: [padding-top] [padding-right] [padding-bottom] [padding-left]

    The order is very important here. The first element is always the top padding, the second is always the right padding, the third is always the bottom padding, and the fourth is always the left padding.

    Next: CSS BackgroundLink to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.

  • One response

    1. Pingback: Frank MacDonald » CSS Tutorial:Padding My Little Posterous

    Leave a Reply

    Please log in using one of these methods to post your comment:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s