The CSS margin properties define the space around elements.
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.
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.
