Difference between margin and padding

Difference between margin and padding

Today we will learn about the different between the margin and the padding on CSS, and we will cover what is margin and padding first.

padding is the space between the content and the border, whereas margin is the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea.
padding and margin are similar on declaration  syntax
example:
div {
 padding: 10px;
}
the short of that is
padding: 10px 10px 10px 10px; mean padding: (top is 10px) (left is 10px) (bottom is 10px) (right is 10px;)
and if i use only tow value like that
padding: 10px 10px;  mean padding: (top and bottom are 10px) (left and right are 10px)
and that also with margin;
margin: 10px same margin: 10px 10px 10px 10px;
if use three value , the fourth value will be same as first value (top);
margin: 10px = margin: 10px 10px 10px 10px;
margin: 15px 20px = margin: 15px 20px 15px 20px;
margin: 15px 20px 5px = margin: 15px 20px 5px 20px;
and there another declaration on CSS
margin-top: 10px;
margin-left: 5px;
margin-bottom: 7px;
margin-right: 3px; 
it same margin: 10px 5px 7px 3px;
and same things for padding.
Note: you don't have to use all of them just use what you need, if you need just make padding on top , just use padding-top, and let other option on default value. 
I created simple project to understand more about the difference between margin and padding: codepen