Every element is a box model.
(This means every element is made up of a
Margin / Border / Padding / Content)
Some elements (maybe most of them) start with default MARGIN & PADDING settings already set and if you want
to start with a clean slate (no margins or paddings) then it is advisable to...
In your own CSS styling file (eg MyStyles.css) add the following :-
* {
padding: 0;
margin: 0;
}
That way ALL elements will start with NO MARGINs and NO PADDINGs. So you can now set them individually as you want.
The * in the CSS style setting means ALL ELEMENTS.
Margin
Border
Padding
Content
All the content of the ELEMENT goes in here.
NOTE...
Setting the WIDTH: and HEIGHT: properties only sets
the CONTENT area width/height. It does NOT include Margin/Border/Padding
Therefore, to know the actual size of your elements box model you have to add up:-
margin (top) + border + padding (top) + height + padding (bottom) + margin (bottom) = actual HEIGHT
margin (left) + border + padding (left) + width + padding (right) + margin (right) = actual WIDTH
Note...
you can set a margin to be a negative number as well as a positive one.
margin set as - margin: 0 20px 20px 20px;
margin set as - margin: 0 20px 20px 20px;
margin set as - margin: 0 20px 20px 20px;
margin set as - margin: 20px 20px 20px -40px;