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 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 actively work to bind the content to its canvas by maintaining some form of relationship between the two, no matter the canvas size.