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.

1.

div#sidebox { margin:10px; }

Code above shows that the four sides of the selector sidebox is 10 pixels between the border and the selector.

2.

div#sidebox { margin:10px 20px; }

Code above shows that the upper and lower limits of the sidebox selector is 10 pixels while the left and right borders within 20 pixels.

3.

div#sidebox { margin:10px 20px 30px 40px; }

or it could be way below:

div#sidebox { margin-top:10px; margin-right:20px;
margin-bottom:30px; margin-left:40px;}

Code above shows that the upper limit of the selector is 10 pixels sidebox, right limit is 20 pixels, the lower threshold is 30px and 40px is the left boundary.

4.

div#sidebox {margin-top:10px;}

Code above shows that the upper limit of sidebox selector is 10 pixels while the other boundary Default value. And other than margin-top, also can be with property margin-right, margin-bottom and margin-left.

Besides using px units (pixels) can also be a unit emphasis (em) or percentages (%), as an example:

div#sidebox {margin:1em 2%; }

The result? …
You can do experiments and test yourself on your browser. that way you will make the game more challenging.

If you look really carefully HTML translation results in the browser is shaped box, inside the box can be divided into several areas such as Content, Padding, Border, and Margin.

From each of these areas can be formatted by using CSS style.

To clarify what the above of CSS format, see the illustration below:

Description:

• In the most central area called the Content,
  Content can be either text or image, is also a combination of Text and Image.
• Padding, Padding separates content with the Border.
• Outside Padding, called the Border,
  Border is the line than the content in between the padding and margins.
• The most outer area called the Margin,
  The margin between the border and separates the outer side.