The difference between margins and paddings boiles down to: paddings are inside the element, while margins are outside the element. Therefore, paddings will be inside the element’s borders and will take the background color of the element, while margins will be outside the element’s borders and will take the background color of the containing element.
There’s a helpful explanation on Visual Composer in case you need it.
Most importantly, though, is that you should not use them to set the absolute position of elements. Paddings should be used only to create space inside the element, while margins should be used only to separate elements from one another or from the edge of the page.
A common mistake is to use margins with specific numerical value to try to center an element in the window. It will never work, because the window will have different sizes, depending on who is using, where they’re using, when they’re using, etc.
If you want to center elements, give this property to its containing element:
text-align: center;
It’s as simple as that. Although, centering type on the web is often a hard way to make your layout look worse.
A common mistake is to use margins to shift elements to the right-hand side of the window. Would it work on a different window size?
And if you want to align to the right, give this property to its containing element:
text-align: right;