codescracker


css

CSS Padding



« Previous Tutorial Next Tutorial »


Padding (space) in the box model specifies the distance between the border of an element and the content within it.

The padding is affected by the background color of an element. The value of padding cannot be negative.

The shorthand property in padding is used to change all the padding properties, such as padding-top, padding-bottom, padding-right, and padding-left at once.

The syntax used to set padding properties is as follows:

padding: value;

Padding can be set according to the values describes in the table given here:

Value Description
Length Specifies the fixed padding in the pt and em units.
Percentage Specifies padding in percentage with respect to the width of a parent block.
Auto Specifies the default padding from the top, bottom, left, or right direction.

The following code fragment shows the specifications of padding properties in the box model:

#container { padding-top: 7px; padding-left: 25%; padding-right: auto;
		padding-bottom: 45px; border: 2px solid black; }

In the preceding code fragment, you can see the following four properties:

CSS Padding Shorthand

If the padding property has four values, then the values are applied to the top, right, bottom, and left paddings, respectively.

The padding property can have from one to four values as shown here one by one.

(i) If CSS padding contains four values like:

padding: 25px 50px 75px 100px;

Then, these four values represents:

(ii) If CSS padding contains three values like:

padding: 25px 50px 75px;

Then, these three values represents:

(iii) If CSS padding contains two values like:

padding: 50px 100px;

Then, these two values represents:

(iv) And, if CSS padding contains only one values like:

padding: 100px;

Then, this value represents:

CSS Padding Examples

Below are some examples shows how to set padding using CSS.

CSS Padding Individual Sides Example

In CSS, it is possible to specify different padding for different sides.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Padding Example</title>
	<style>
		p { background-color: green;color:white; }
		p.padding { padding-top: 50px; padding-right: 100px;
			padding-bottom: 50px; padding-left: 100px; }
	</style>
</head>
<body>

<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>

</body>
</html>

Here is the output produced by the above CSS padding example code:

css padding individual

CSS Padding Shorthand Example

To shorten the padding code, it is possible to specify all the padding properties in one property. This is called the shorthand property.

The shorthand property for all the padding properties is "padding". Let's look at the following example shows how to use padding shorthand:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Padding Example</title>
	<style>
		p { background-color:blue;color:white; }
		p.padding {padding: 50px 100px; }
	</style>
</head>
<body>

<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>

</body>
</html>

Below is the sample output of the above CSS padding shorthand example code:

css padding shorthand

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test