Many intermediate and begginer CSS designers get confused when it comes to padding and margin values. What’s the difference? They both just shift stuff, so why the different names? Don’t they do the same thing?
Although the behavior of margin- and padding- is very similary, there is one important difference: margin- is on the outside of the element, and padding- is on the inside. What this means is, one will apply the whitespace shift “after” the element begins (padding), and the other will apply the whitespace “before” the element begins (margin). Many times there is no visible difference, but sometimes there is – a big one.