How to create margin or padding in CSS
The first element layer is always the padding. This padding is enclosed by the border and the border on its turn is enclosed by the margin. This structure is always the same and cannot be altered. The padding should be used to increase or decrease the space in between the content of an element and the border. The margin on its turn can be used to increase or decrease the space in between the border and the other elements of the website.
The element margin and the element padding always consist of 4 sides. The 4 sides can be called up separately by the CSS, but they can also be given an equal value. To assign an equal value to the padding and the margin you should do the following:
padding: 0;
The above example sets all sides to the 0 value, but the above in fact means:
padding: 0 0 0 0; /* padding: upper right bottom left; */
If you would for example prefer to have a div.box 10px margin at the top and a div.box 10px padding at the right side you will have to set the following:
padding: 0 10px 0 0;
It is also possible to assign an equal value to the upper side + the bottom side or the right side + the left side. This can be done in practice by inserting the following:
padding: 5px 0; /* (the upper side and the lower side will have a 5px padding) */