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 padding around it.

The padding of an HTML element is specified using the padding CSS properties. The padding CSS properties are:

• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

The padding CSS property values are specified in the same way as margins. Here is are three example CSS rules specifying the padding of some HTML elements:

#divOne {
    padding : 20px;
}

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

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

The first of these CSS padding examples sets the padding 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 padding CSS property.

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

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