Margin is a way of positioning elements relative to their current position on the page. It is best used when you just need to add some space between two elements. There are other use-cases for it too, but this is what I find myself using it for most often.

You can add margin to the top, bottom, left, and right of elements. And there are a couple different styles you can use to write this. These are referred to as shorthand syntax.

//10px margin on all sides
margin: 10px;

//10px margin top and bottom, 20px margin left and right
margin: 10px 20px;

//Set margin for each side specifically. 
//Order: top, right, bottom, left
margin: 1px 2px 3px 4px;

//each side has a specific property too.
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;


Leave a Reply

%d bloggers like this: