Hey Readers!

This blog post will hopefully clear your doubts regarding the difference between CSS 'margin' and 'padding' properties.

CSS Margin: The CSS margin property is used to specify the space around HTML elements . It gives the space of an element outside the border. The margin property also accepts negative values.

Margin can be applied to elements that have or not have borders. If there is a border, margin will give  the space from the border of this element to the element next to it. Secondly, if there is not a border, then in this case, margin will give the space from the content of this element to the next element(with or without border). Also, margin property will not affect the element's dimensions.

Margin property can also be given to individual sides of an element with the following four properties-

• margin-top
• margin-right
• margin-bottom
• margin-left

Here is an example showing the same.

CSS Pading: The CSS padding property is used to specify the space around the element content. It gives the space to an element inside the border. The padding property does not accept negative values. More clearly, padding specifies the space between the content of an element and its border.

Padding tells how far the content of the element  is from the border. Padding will affect the element's dimensions. After applying padding, the new dimensions will be set to "height + padding" and "width + padding".

Like margin, padding property can also be given for individual sides of an element with the following four properties-

• padding-top
• pading-right
• padding-bottom
• padding-left

Here is an example to explain the concept better.

This was all about it. Happy Coding!