chevron_left
399 points
8 4 3

What is the difference between padding and margin

  • What is Padding?

Padding is the term used to refer to the space between the element and the border. It is important to highlight that padding goes around all the four sides of the content.

  • What is Margin?

The margin is the term used to refer to the space between the element and the external elements. It is the border between one element and the other.

Difference Between Padding and Margin

  1. Interaction of Padding and Margin

One of the main difference between margin and padding is their interactions. Padding interacts with the internal constituents of the design or object because it is the space between the boundary and the contents of the object under consideration. On the other hand, margin interacts with the external environment of the subject under attention because it is the space between the object and the next object, which is closest to the object.

  1. Purpose of Padding and Margin

Both margin and padding are differentiated by their purposes or the roles they play in an object. The main purpose of the margin is to ensure that the object is not exposed to other objects surrounding the object all around the four sides. It provides security for the entire object such that the object is not interfered or affected by the external environment. On the other hand, padding plays the role of ensuring that the contents of the object do not interact with the borders. Padding ensures that the contents do not touch the edges of the object covering them hence acting as a shock absorber.

 

 

  1. Behave Differently Under Different Browsers

One of the main difference to note between margin and padding is that they behave differently under different browsers. One will find that a certain browser handles the external spaces of an object and the internal spaces of an object while another browser refuses to handle either the margin or padding. Sometimes, it is possible to find that a browser refuses to handle any of the spaces of the object may it be margin or padding. This explains why some margins auto collapse when they are mounted on certain browsers.

  1. Effect on Size in Padding and Margin

The other factor differentiating both margin and padding is that they have some significant different in the way they behave or they affect the height and the width of the object. Margin increases the size of the object by ensuring that it increases some several inches on both the breadth and the height of the object. This is because the margin is positioned outside the object and it tries to influence the space outside the object. On the other hand, padding has no impact on the size of the object because it does not influence the width and height of the object. In fact, padding is within the object, which means that it cannot affect the size of the object where it is contained.

  1. When to Use Padding and Margin

Lastly, when to use margin differs with when one wants to use padding. This means that, despite the two spaces portraying significant differences in their purposes, some significant difference can also be shown on when it comes to actual use of each space. Padding is mostly used when one wants the background color to continue in the space that one is creating. This means that people use padding when they want their background to peek out. On the other hand, people use margins when they want their background color to invade their personal space.

TABLE ILLUSTRATING DIFFERENCES BETWEEN MARGIN AND PADDING

Margin

Padding

Space between different elementsSpace between contents and edge of the component
Used to increase size of the componentCannot increase size of the element
Used when one wants background color to invade personal spaceUsed when one wants background color to peek out
Interacts with the external environment of an elementInteracts with the internal environment of an element

 



 

More Posts

What is the difference between margin and padding amna - Mar 17
What is the difference between pre and post Sanjana Sagar - May 20
What is the difference between sql and tsql Sanjana Sagar - May 20
What is the difference between oltp and olap Sanjana Sagar - May 20
What's the difference between alpha and beta Sanjana Sagar - May 20
What is the difference between git and github Sanjana Sagar - May 29
What is the difference between div and span amna - Jun 26
4. What is the Difference Between is and == in Python? hubconcepts - Oct 21, 2020
what is the difference between char and varchar? Being human - Jun 8
What is the difference between ascii and unicode Sanjana Sagar - May 28