CSS padding

In this article I will show you how to use the CSS padding attribute in your website projects.

Tutorial info:

Name:	CSS padding
Total steps:	1
Category:	CSS tutorials
Date:	2008-04-02
Level:	Beginner
Product:	See complete product
Viewed:	633

Bookmark CSS padding

Step 1 - CSS padding

CSS padding

CSS padding definition

The CSS padding property defines the space between the element border and element content.

Don't forget that the default padding values could be different from browser to browser.

Usage

You can define CSS padding property in more ways.

Define the same value at once for top,bottom,left,right
Define horizontal and vertical distance at once
Define all 4 values separately

Here is an example how you can do this:

Code: 
.test {
   padding: 4px;	   
}
 
.test2 {
   padding: 2px 4px;	   
}
CSS F1

You can define the 4 different value at once or one by one with the dedicated property. If you define all 4 CSS padding values at once then the order is the following:

top
right
bottom
left

Quite simple to remember: clockwise, starts from midnight :)

Code: 
.test3 {
   padding: 2px 4px 6px 8px;	   
}
 
.test4 {
   padding-top: 4px;
   padding-right: 6px;
   padding-bottom: 8px;
   padding-left: 10px;	   
}
CSS F1

CSS padding example

Code: 
<html>
<head>
  <title>CSS padding</title>
</head>
<body>
  <p style="padding:5px;border:1px solid;">
     This is a 5 pixel padding for all side.
  </p>
 
  <p style="padding:2px 10px;border:1px solid;">
     This is a 2 pixel on top and bottom and 10px left and right.
  </p>
 
  <p style="padding:2px 4px 6px 8px;border:1px solid;">
     All paddings are different
  </p>
 
  <p style="padding:0px;border:1px solid;">
     No padding at all.
  </p>
</body>
</html>
 
CSS F1

And the output is:

This is a 5 pixel padding for all side.

This is a 2 pixel on top and bottom and 10px left and right.

All paddings are different

No padding at all.

Tags: css padding property, css padding, css, padding

CSS padding - Table of contents
Step 1 - CSS padding

CSS F1

Help in CSS, get CSS code, scripts, tutorials

CSS padding

Tutorial info:

Bookmark CSS padding

Step 1 - CSS padding