Box Model

The box model is how HTML elements are presented in a page. It consists, from inner to outer, of content → padding → border → margin. Some of these things may be set by default in a browser using the user agent style sheet.

Margins

Margins can be defined as the box that contains our content. There are 4 margins for every box, and we can set either all values for the same using margin, or each value individually (either explicitly or in shorthand), as follows:

/* Setting all margins equally */
.container {
	font-size: 1.5rem;
	margin: 1.5em;	
}
 
/* Setting each margin individually */
.container {
	font-size: 1.5rem;
	margin-top: 1.5em;
	margin-right: 2em;
	margin-bottom: 2em;
	margin-left: 4em;
}
 
/* Same as above, but in shorthand */
.container {
	font-size: 1.5rem;
	margin: 1.5em 2em 2em 4em;
}

Note that we can also do margins in pairs. Setting margin: 1.5em 2em;, for example, will apply 1.5 to top and bottom, 2 for left and right.

The same idea also applies to padding and border.