The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Values for margin are :
auto, % & length(unit of measurement).
E.g. margin-top: auto;
E.g. margin: 20px;
E.g. margin: 10%;

A margin can either be place on the top, right, bottom or left, like this.
E.g. margin-top: 10px;
E.g. margin-right: 10px;
E.g. margin-bottom: 20px;
E.g. margin-left: 10px;

Using the short hand property, values can be added to the margin of any element.
E.g. margin: 10px 10px 20px 10px; → means all 4 sides have different margin set to them.
Following our syntax it goes like this, margin-top first, margin-right second, margin-bottom third and margin-left comes last.
E.g. margin: 10px 10px 20px → if like this, it means only 3 sides have a margin set to them( top, right & bottom).
E.g. margin: 10px 10px → if like this, it means only 2 sides have a margin set to them (top & right).
E.g. margin: 10px; → if like this, it means all sides have a margin set to them of 10px.

Padding
The CSS padding properties define the space between the element border and the element content.The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
it has two values:
% and length(unit of measurement)
E.g. padding-top: 12px;

you can style all individual sides of the padding using either the top, right, bottom or left declaration property.
E.g. padding-top: 10px;
E.g. padding-right: 10px;
E.g. padding-bottom: 20px;
E.g. padding-left: 10px;

you can as well use the padding short hand value to declare everything at once.
E.g. padding: 25px; → means applies padding to all sides using the value given.
E.g. padding: 10px 10px 20px 10px; → applies padding to the four sides starting from top, to right, to bottom and finally left.

Now you know how elements are structured using CSS, practice some more on margin and padding to understand it much better.