CSS Padding

CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.

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 left padding of an element.
padding-right	It is used to set right padding of an element.
padding-top	It is used to set top padding of an element.
padding-bottom	It is used to set bottom padding of an element.

CSS Padding Values

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

CSS Padding Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.padding {
    padding-top: 50px;
    padding-right: 100px;
    padding-bottom: 150px;
    padding-left: 200px;
}
</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>

Test it Now

Output:

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.

Next TopicCSS Position

← prev next →