CSS Padding

Padding in CSS

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.

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:

1. padding : It is used to set all the padding properties in one declaration.

2. padding-left : It is used to set left padding of an element.

3. padding-right : It is used to set right padding of an element.

4. padding-top : It is used to set top padding of an element.

5. padding-bottom : It is used to set bottom padding of an element.


CSS Padding Values:

a. length : It is used to define fixed padding in pt, px, em etc.

b. % : It defines padding in % of containing element.


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>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *