CSS Padding Property
- Introduction
- CSS Padding Property
- CSS Padding for each side
- Conclusion
Introduction:
CSS padding property is used to clear the space around the content area. Padding is distance between the content and the border or edge of the HTML element. In this article I would like to discuss about CSS properties with respect to the padding area. And also I told that we can control different padding components independently. We can control padding-top, padding-right, padding-bottom and padding-left independently.
CSS Padding Property:
CSS padding property is used to specify the amount of area to be cleared around the content area of an HTML element. You can assign the various values or we can assign space seperated list of values. You can assign a single or more than four value for padding property only. By default remember that padding will be transparent, Let’s see some examples:
One value:
Padding : 10px;
It’s going to set the value is padding-top : 10px, padding-right:10px, padding-bottom : 10px and padding-left : 10px. If you observe carefully the code that we have written has padding-top, padding-bottom, padding-left and padding-right all are 10px instead of writing four times you can simply use padding of 10px that does the same thing.
Two values:
Padding : 10px 20px;
It’s going to be set the value is padding-top : 10px, padding-bottom : 10px, padding-right : 15px and padding-left : 15px. In this method of padding the first value is dedicated for top and bottom, the second value is dedicated for left and right.
Three values:
Padding : 10px 20px 30px;
It’s going to be set the value is padding-top : 10px,padding-right : 20px, padding-left : 20px and padding-bottom : 30px. In this code the first value is going to set the padding-top, the second value is dedicated for padding-right and padding-left and the third value is dedicated for padding-bottom.
Four Values:
Padding : 10px 20px 30px 40px;
It’s going to be set the value is padding-top : 10px, padding-right : 20px, padding-bottom : 30px and padding-left : 40px. In this four value padding property method is the first value is dedicated for padding-top, second value is dedicated for padding-right, third value is dedicated for padding-bottom and the fourth value is dedicated for padding-left.
CSS Padding for Each Side
Syntax:
<html>
<head>
<title>CSS Padding</title>
<style>
button{
width: 10%;
text-align: center;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<button> CLICK </button>
</body>
</html>
Padding-top:
It is used to specify the amount of area to be cleared above the content area of an HTML element. Various values that we can assign to padding top property are we can use the fixed length unit like pixel. We can use a responsive unit like percentage (%). You keep written the basic html document structure code in a text editor or notepad. I have titled it CSS padding. In the body section I am going to create one button and I apply some styling in the head section. I will create <style> tag within that I tell to the browser locate button in this page and apply background color to cyan.
You can save it and see that the background color is applied to button and also you can observe the button is stick to the edge or border of the button element. If we want we can clear the space around the content area to do that, we are going to take help of CSS padding properties. The first CSS padding property we are going to use is padding top : 10px;. I am using the fixed unit pixel. You can save and see that padding-top is 10px and you can see 10 pixel space is cleared above the content area.
Padding-right:
It is used to the specify the amount of area to be cleared on the right hand side of the content area of an HTML element length. You can use fixed length like pixels. In the same button element I can style it for padding right property. I will assign padding right of 10px and save it. You can see that on the right hand side 10 pixel padding is added so padding right is 10px. It has cleared right hand side little bit space of the content area.
Padding-bottom:
Padding bottom property is used to specify the amount of area to be cleared below the content area of an HTML element. You can assign various values or fixed length unit. In the button style I will add padding-bottom of 10px. You can save and see the code below the content area 10 pixel area is a cleared by using the padding-bottom.
Padding-left:
It is used to specify the amount of area to be cleared on the left hand side of the content area of a HTML element. In the same button styling I will add padding-left property of 10px. You can save the file and see that padding left added on the left-hand side of the content area. 10px area is a cleared by padding-left property.
Conclusion:
For this padding property is enough friends, I suggest you people to try using the CSS padding properties and experiment for more benefits and be up to date.
