Padding vs Margin explained

Learn the basic difference between Padding and Margin which are used in web design and development.

With Padding and without Padding.

Padding in simple words is the white space created inside of an Element.

In the below example, padding is removed from the ‘Apply Now’ button. Thus, no space and breathing room for the text label.

Button without Padding.

The Border is an essential element that separates the padding from the Margin.

In the above example border is applied around the rectangular container with red color.

Margin is the white space created outside of an Element.

In the below example, Two columns without and with margins-added can be seen. There’s no space and breathing room in the first two columns.

Without and With Margin.