CSS HTML Javascript jQuery Ajax PHP Example Java MORE

CSS Padding

❮ Previous Next ❯

CSS Padding Properties

Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set the left padding of an element.
padding-right It is used to set the right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set the bottom padding of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing elements.

Padding Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: green;  
}  
p.ex {  
    padding-top: 100px;  
    padding-bottom: 100px;  
    padding-right: 150px;  
    padding-left: 150px;  
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified padding. </p>  
<p class="ex">This paragraph is displayed with specified padding.</p>  
</body>  
</html>

Run it yourself

Padding - Shorthand Property

To minimize the code, it is possible in CSS to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual

    padding properties:
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

So, here is how it works:

If the padding property has four values:

    padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: yellow;  
}  
p.ex {  
    padding: 50px 100px 50px 100px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified padding. </p>  
<p class="ex">This paragraph is displayed with specified padding.</p>  
</body> 
</html>

Run it yourself

If the padding property has two values:

    margin: 50px 100px;
  • top and bottom padding are 50px
  • right and left padding are 100px

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: pink;  
}  
p.ex {  
    padding: 50px 100px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified padding. </p>  
<p class="ex">This paragraph is displayed with specified padding.</p>  
</body> 
</html>

Run it yourself

If the padding property has one value:

padding: 100px;

all four padding are 100px

Margin Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: Lightgreen;  
}  
p.ex {  
    padding: 50px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified padding. </p>  
<p class="ex">This paragraph is displayed with specified padding.</p>  
</body> 
</html>

Run it yourself

❮ Previous Next ❯