1. CSS Tutorial
2. Using CSS in HTML
3. CSS Properties and CSS Rules
4. CSS Selectors
5. CSS Inheritance
6. CSS Precedence
7. CSS Box Model
8. CSS margin
9. CSS padding
10. CSS border
11. CSS Units
12. CSS Colors
13. CSS Text Styling
14. CSS List Styling
15. CSS Table Styling
16. CSS Link Styling
17. CSS Form Styling
18. CSS Image Styling
19. CSS Background Images
20. CSS Gradients
21. CSS Box Shadow
22. CSS display
23. CSS float
24. CSS position
25. CSS Media Queries
26. CSS Column Layout
27. CSS opacity
28. CSS Web Fonts
29. CSS 2D Transformations
30. CSS Transitions

As explained in the text about the CSS box model, an HTML element can have margins around it.

You can control the margin around an HTML element via the following CSS properties:

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

Each of these CSS properties sets the margin around the HTML element using any of the standard CSS units (px, em etc.). Here are some examples:

#divOne {
    margin : 20px;
}

#divTwo {
    margin : 20px 10px 20px 10px;
}

#divThree {
    margin-top    : 20px;
    margin-right  : 10px;
    margin-bottom : 20px;
    margin-left   : 10px;
}

The first of these CSS margin examples sets the margin on all four sides of the HTML element with the id divOne to 20 pixels. It does so by setting the value 20px for the margin CSS property.

The second example sets the top margin to 20 pixels, the right margin to 10 pixels, the bottom margin to 20 pixels and the left margin to 10 pixels. It does so by setting the margin CSS property to 20px 10px 20px 10px. The four values specify the top, right, bottom and left margins individually.

The third example sets the top margin to 20 pixels, the right margin to 10 pixels, the bottom margin to 20 pixels and the left margin to 10 pixels. It does so by setting each of the four CSS properties margin-top, margin-right, margin-bottom and margin-left separately.