CSS Margin
The margin of an object is the space around it, that nothing can enter. Like a security fence for a factory for example.
Margin can be used to move objects away from each other and is very helpful in positioning these objects where you want.
The image above is a very simple example of how margins are used.
The CSS for the image above would be like as follows.
HTML:
.boxA {
margin: 30px;
}
.boxB {
margin: 15px;
}
Because both box A and B are next to each other, and they both have margins, their margins are summed and are place that far apart from each other.
In this example, box A has a margin of 30px and box B has a margin of 15px, meaning that the boxes will be 45px apart.