When you start designing you’ll hear the words “margin” and “padding” thrown around a lot. Pretty quickly you should understand that they’re referring to space between elements.
At first they might seem confusing since they seem like they both have to do with white space around an element. However, once you understand the difference between margin and padding you'll be able to make better design decisions.
Padding is the space that’s inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side with CSS.
Margin is the space between the border and next element. The space outside the border between it and the other elements is the margin. Just like padding, it's possible to target all four sides of an element to change it's margin.
The easiest way to understand the difference between margin and padding is through an image. The image below demonstrates what each part of something like a paragraph element looks like.
The image above is also referred to as the "box model". The box model is used when dealing with CSS. It's important to understand how the box model works so you can understand how width and height of your elements work. When you set the width and height of an element, it's just for the content area. You'll probably have to do some math to make sure your elements are lining up correctly because of the margin and padding.
Something important to note that can get confusing to beginners is that the padding and margin will still be a part of your element even if you don't include a border. In the image below we have to blocks of content with no added border. You can see how the margin and padding are still valid.