Difference Between Padding & Margin

Margin and padding can be confusing. After all, in some ways, they seem like the same thing - a space around an element

(image, text etc). You can manipulate the values of these two functions in the template editor.




Here is to illustrate them.




As you can see from the diagram below, in the center is where your element (texts, images etc) would be seen. The space

around the element is called padding then there's the border and then your margin. Basically, padding defines the space

between the specific element and its border whereas the margin defines the space between the border of the specific

element and any other elements in the template. It could be called the padding is the inner gap and the margin is the outer

gap.





Padding - the horizontal and vertical space around the area of an element





Margin - the space outside or between elements are the margin areas.