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
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.
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.
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.
Leave a Reply