Margins help define the relationship between content and its canvas. They can play a key role in making a composition feel like it fits snugly into the space available… not too big, not too small.
There are two main kinds of margins: passive and active.
Passive margins
Passive margins are everywhere. They’re what you get when a browser window is larger than the content was designed for. They don’t care about the relationship between content and its canvas. They’re simply leftover space, and a reminder that you’re looking at a template rather than a layout that’s been hand-composed for your exact circumstance.
Active margins
Active margins actively work to bind the content to its canvas by maintaining some form of relationship between the two, no matter the canvas size.