In this article of CSS Tutorial we talk in detail about css padding. If you are a blogger or you have just started blogging then you must have a little knowledge of css. In this post you are told only about the padding property. If you have not yet read our entire tutorial, then you can read all the articles on Learn CSS In English.
The css padding property is used to give space around the content of the element inside a defined border.
In CSS you can fully control padding. You can use different padding properties for padding each side of an element.
All CSS Padding Properties
1. Padding: – It is used to declare all padding properties simultaneously.
2. padding-bottom: – It is used to set the bottom padding of an element.
3. padding-left: –
It is used to set the left padding of an element.
4. padding-right: – It is used to declare the right padding of an element.
5. padding-top: – It is used to denote the top padding of an element.
How to use CSS Border Property
How to use CSS Outline Property
CSS Padding property values
According to any padding properties you can give the following values according to it.
lenth: – You can use css lenth values to declare padding in it. Such as – px, pt, cm etc.
%: – In this,% value is given out of the width of a containg element.
inherit: – The padding in this is according to the specified padding in the parent element.
Shorthand padding property
Padding is used to simultaneously declare padding-top, padding-right, padding-bottom and padding-left properties.
If 4 values of padding property are defined, then eg: –
padding: 10px 20px 30px 50px;
right padding- 20px
bottom padding – 30px
left padding- 50px
If 3 values of padding property are given then eg: –
padding: 10px 20px 30px;
Then the result will be as follows
top padding – 10px
right and left padding- 20px
bottom padding – 30px
If only 2 values of padding property are given such as: –
padding: 10 px 20 px; So it will work like this: –
The top and bottom padding will be 10px.
The right and left padding will be 20 px.
If only one value of the padding property is specified, then all four padding (top padding, left padding, bottom and right padding) will be 20px.
Diffirence between Padding and Element width property
CSS width property is for specifying the width of an element’s content area. The partion that occurs within the border, padding, and margin is called the content area.
CSS Background Learn English
How CSS Color property is used
If the width of an element has already been specified, adding padding will add padding width to the total width of that element.
For example: –
If the width of an element is 200 px and the padding is 10 px, then the actual width of that element (200 px +10 px left padding + 10px right padding) will be 220px.
If you want to keep the width to 200px only then you can use the box-sizing property. This will not make any difference in width no matter the padding.
Here total width is 200px
In this article, we read in detail about CSS padding property. Examples are also given here to explain you correctly. If you have not understood anything, then you can ask by commenting.
My name is Sant Lal from Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre.