Today I am going to give you an Insight on the Padding Property of CSS. It is again a useful attribute which is used by front end developers most of the time. Padding has got to do with an element in a web page. It may be a button or some heading or text in a container. Containers are storage spaces where we can add text into it. It is formally defined as Divisions abbreviated as div. I will explain what this means another day.
So coming back to Padding, it is basically used to separate out the text contained in a Box from the Border. The separation is achieved by adding spaces all around the text. This is done to give some kind of definition to the text in the box. Let me Illustrate this with the help of an example-
Down Below is a box of color yellow. You will notice there is no border applied to it.
Now I am applying a border with a solid type ,10 pixels width and Black color . I am getting a bit technical here, the terms are explained in my previous blogs. Please refer to them, if you need to. By now,you might have anticipated what the result is going to be.
Let’s see what happens if I am apply Padding. Wait and Watch!
Here it is..
See the difference? Before I applied padding, the text was aligned to the border on top. I have applied Padding to all four sides of the text which has literally spaced out the text.
Here is what I wrote to achieve that
padding: 30px 20px 15px 10px;
Let me formally explain what it is-
padding: padding-top padding-right padding-bottom padding-left;
padding-top -it is the space added from the top of the content
padding-right: it is the space added to the right of the content
padding -bottom- it is the spaced added below the content
padding-left- it is the space added left of the content
Each of these properties can be applied individually. And if you want to apply all of them at once like the one I described above,you need to follow the clockwise direction. Remember I explained it in my previous block ie- top, right, bottom and left.
Before wrapping up , just a few more pointers-
What you saw earlier was if the padding property consisted of four values. What if it contained three values?
eg-padding: 45px 65px 32px;
It means that the top padding is 45px, right and left padding are 65 px and the bottom padding is 32px
If it contained two values?
eg- padding: 20px 50px;
the top and bottom padding are 20px and the right and left paddings are 50px
And for one value?
eg- padding: 45px;
all the four directions-top,bottom, right and left would be 45px.
Hope you enjoyed reading the blog today. Until then See you next time!