What is the Difference Between Margin and Padding

The main difference between margin and padding is that margin helps to create space around the element outside the border, while padding helps to create space around the element inside the border.

Generally, almost every business organization maintains a website. It helps to provide information to the customer on the products and the services of the organization. HTML, CSS, and JavaScript are the basic languages used for web programming. HTML helps to build the structure of the webpages, while JavaScript helps make the content interactive. Moreover, CSS stands for Cascade Style Sheets (CSS), and it helps to make the webpages presentable with styling. In overall, margin and padding are two properties available in CSS.

Key Areas Covered

1. What is Margin
       -Definition, Examples
2. What is Padding
      -Definition, Examples
3. Difference Between Margin and Padding
      -Comparison of key differences

Key Terms

CSS, Margin, Padding

Difference Between Margin and Padding - Comparison Summary

What is Margin

Margin is a property in CSS that is used to create spaces around the elements, outside of the border. Programmer can set the margin for top, right, bottom and left. In other words, he can set those values using margin-top, margin-right, margin-bottom and margin-left.

The values can be of following types.

First, auto allows the browser to calculate the margin. Moreover, length denotes a margin in px, pt or cm, while % helps to describe a margin as a percentage relative to the width of the containing element. Finally, inherit denotes that the margin has to inherit from the parent element.

Difference Between Margin and Padding

Figure 1: CSS examples with margin

Above are a few examples. The first example sets the margin of the top, right, bottom and left according to the defined values. The second example defines the top, right, bottom, left margins in one line. It assigns margin of 25px to the top and bottom while 50px to right and left of the paragraph element. The final example sets all margins to 25px of the paragraph element.

What is Padding

Padding is a property in CSS that helps to create space around an element inside the border. Programmer can set the padding for top, right, bottom and left.  In other words, he can set those values using padding-top, padding-right, padding-bottom and padding-left.

The values can be of following types.  

The length describes padding in px, pt or cm, while % denotes padding as a percentage relative to the width of the containing element. Finally, inherit describes that the padding should be inherited from the parent element.

Main Difference - Margin vs Padding

Figure 2: CSS example with padding

Above are a few examples. The first example sets the padding of the top, right, bottom and left according to the defined values. The second example defines the top, right, bottom, left paddings in one line. It assigns margin of 25px to the top and bottom while 50px to right and left of the paragraph element. The final example sets all paddings to 25px of the paragraph element.

Difference Between Margin and Padding

Definition

Margin is a CSS property that is used to create space around the element outside the defined border, while the padding is a CSS property that is used to create space around the element, inside the defined border. Thus, this explains the main difference between margin and padding.

Values

Furthermore, the values of margin can be auto, length, % or inherit, whereas the values of padding can be length, % or inherit type. Hence, this is another difference between margin and padding.

Conclusion

In brief, margin and padding are two properties in CSS that allows styling the web pages. It is not possible to assign negative values for those properties. The main difference between margin and padding is that margin helps to create space around the element outside the border, while padding helps to create space around the element inside the border.

Reference:

1. “CSS Margins.” CSS Margin, Available here.
2. CSS Padding, Available here.

About the Author: Lithmee

Lithmee holds a Bachelor of Science degree in Computer Systems Engineering and is reading for her Master’s degree in Computer Science. She is passionate about sharing her knowldge in the areas of programming, data science, and computer systems.

Leave a Reply