CSS Padding Properties

What is Padding?

CSS padding is a shorthand property that defines the space between an element's border and its content. It sets the padding for all four sides (top, right, bottom, and left) at once.

CSS Padding Properties0

Possible Values

Value Description
length Defines a fixed padding using units like pixels, pt, em, etc.
% Defines padding as a percentage relative to the width of the containing element.

Padding - Individual Sides

In CSS, you can specify different padding values for each side:

padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
  • Top padding is 25px
  • Right padding is 50px
  • Bottom padding is 25px
  • Left padding is 50px

Padding - Shorthand Property

To shorten the code, you can use the shorthand padding property to set all padding values in one declaration:

padding: 25px 50px;

The padding property can have one to four values:

padding: 25px 50px 75px 100px;
  • Top padding is 25px
  • Right padding is 50px
  • Bottom padding is 75px
  • Left padding is 100px
padding: 25px 50px 75px;
  • Top padding is 25px
  • Left and right padding is 50px
  • Bottom padding is 75px
padding: 25px 50px;
  • Top and bottom padding is 25px
  • Left and right padding is 50px
padding: 25px;
  • All four paddings are 25px

All CSS Padding Properties

Property Description
padding Shorthand property to set all padding properties in one declaration.
padding-bottom Sets the bottom padding of an element.
padding-left Sets the left padding of an element.
padding-right Sets the right padding of an element.
padding-top Sets the top padding of an element.

Examples

Setting Padding with Shorthand Property

This example demonstrates how to use the shorthand property to set all padding values in one declaration.

Setting Left Padding

This example demonstrates how to set the left padding of an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title>
<style>
p.padding { padding-left: 2cm; }
p.padding2 { padding-left: 50%; }
</style>
</head>
<body>
<p>This is a text without left padding.</p>
<p class="padding">This text has a left padding of 2cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>

Setting Right Padding

This example demonstrates how to set the right padding of an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title>
<style>
p.padding { padding-right: 2cm; }
p.padding2 { padding-right: 50%; }
</style>
</head>
<body>
<p>This is a text without right padding.</p>
<p class="padding">This text has a right padding of 2cm.</p>
<p class="padding2">This text has a right padding of 50%.</p>
</body>
</html>

Setting Top Padding

This example demonstrates how to set the top padding of an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title>
<style>
p.padding { padding-top: 2cm; }
p.padding2 { padding-top: 50%; }
</style>
</head>
<body>
<p>This is a text without top padding.</p>
<p class="padding">This text has a top padding of 2cm.</p>
<p class="padding2">This text has a top padding of 50%.</p>
</body>
</html>

Setting Bottom Padding

This example demonstrates how to set the bottom padding of an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title>
<style>
p.padding { padding-bottom: 25px; }
p.padding2 { padding-bottom: 50%; }
</style>
</head>
<body>
<p>This is a text without bottom padding.</p>
<p class="padding">This text has a bottom padding of 25px.</p>
<p class="padding2">This text has a bottom padding of 50%.</p>
</body>
</html>