In the last article, we learned about what actually CSS margins do and how to use them with various properties like auto and inherit.
Now let's move forward to learn about padding in CSS so that we actually differentiate both and you will no longer be confused.
So let's begin...
Actually, padding property is shortcut property for the following individual properties:
Note: The padding can be mentioned in any valid length unit in CSS like px, pt, cm, etc. We can also mention padding in % of the width of the containing element. Value of padding property can also be set as inherit so that padding values will be inherited from its parent element just like we have seen in the margin.
Effect of padding on CSS width
Let's say you have a div element on a page. We have set the width of div to 300px. Now if you set the padding of div to say 20px, then actual width of div element will be 340 px (300px + 20px of left padding + 20px of right padding). This may disturb your page structure.
To keep width fix at 300px, o matter what padding you set, you can use box-sizing property. This property will cause the element to maintain its width and if you increase padding, width available for content will decrease automatically.
That's all for today. In the next article, we will finally see the difference between padding and margins and remove our confusion for once and all.
Till then #keepCoding.
Now let's move forward to learn about padding in CSS so that we actually differentiate both and you will no longer be confused.
So let's begin...
CSS Padding
The padding property in CSS is used to create space around the content of an Element inside of defined borders.Actually, padding property is shortcut property for the following individual properties:
- padding-top
- padding-right
- padding-bottom
- padding-left
In fact, padding: 10px 20px 30px 40px is same as
- padding-top:10px
- padding-right:20px
- padding-bottom:30px
- padding-left:40px.
Just remember order is important while writing in the padding which is top, right, bottom and left.
Note: The padding can be mentioned in any valid length unit in CSS like px, pt, cm, etc. We can also mention padding in % of the width of the containing element. Value of padding property can also be set as inherit so that padding values will be inherited from its parent element just like we have seen in the margin.
Effect of padding on CSS width
Let's say you have a div element on a page. We have set the width of div to 300px. Now if you set the padding of div to say 20px, then actual width of div element will be 340 px (300px + 20px of left padding + 20px of right padding). This may disturb your page structure.
To keep width fix at 300px, o matter what padding you set, you can use box-sizing property. This property will cause the element to maintain its width and if you increase padding, width available for content will decrease automatically.
That's all for today. In the next article, we will finally see the difference between padding and margins and remove our confusion for once and all.
Till then #keepCoding.
