margins & paddings pt1
When I started working with css, one of the first things I needed to know was how I was supposed to create whitespace. Before I learned my way around css, I (ab)used spaces and br tags to create whitespace on the pages I made. Not really the way to go. So I started looking around and hit margins and paddings. And thus a confusing journey began.
the box model
If you're looking around searching for info on margins and paddings, it won't take you long before you run into the w3c box model. This model explains the standard layout possibilities of a box in css, including margins and paddings. The w3c describes the box model as follows:
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas
On the same page you can see a visual representation of the box model, there's an even clearer example provided by Molly Holzschlag for those who are confused by the awful w3c layout.
The box model is a famous concept, mostly due to the way Microsoft implemented it in their older IE browsers. This caused a lot of confusion, but that is not really within the scope of this article. We are here to look at paddings and margins, so for the time being, we'll drop the content area and borders and focus on what will give us the whitespace we crave for.
paddings
1/ div {padding:1em;} 2/ div {padding:1em 2em 1em 2em;} 3/ div {padding-left:1em; padding-top:1em} css paddings provide whitespace between the border of a box and the content within a box, as simple as that. It is used to push content away from the borders of a box. When working with block elements, paddings can be applied in all four directions. When working with inline elements, paddings only apply on the left and right side of the box. There's a little exception when tinkering with line-heights but that again would lead us too far.
In the example above, we see that we can define a singular padding on an element. This padding will then be applied in all four directions (example 1). It's also possible to define each padding separately for each direction in one statement (example 2). The last example shows us a padding defined per direction. Each method has its pros and cons, more about that later.
margins
css margins provide whitespace between the border of a box and its surrounding elements. Margins are used to push boxes away from its surroundings. Again, when working with block elements, margins can be applied in all four directions. When working with inline elements, margins only apply on the left and right side of the box.
The css declaration of margins is equal to that of paddings so no point in repeating that.
margins and paddings
While there is much more to be said about margins and paddings, that will be handled in later articles. The focus of this miniseries will lie on the use of both properties when creating layouts.
If you consider it well, in many situations there is little difference between the use of paddings and margins, and often both can be applied to reach the same result. When asking people when to use either one of them you will often be met with a stammering ... uhm, and probably some mutterings about borders and backgrounds. And indeed, the use of both properties is different when a box has a border and/or background color as the text will align differently when using a padding or a margin.
But what to do when there are no borders and backgrounds? Is it a free for all, or are their some guidelines to follow? I've never found a solid answer to that question so I went to look for one myself. In the next couple of articles, I will try and come up with a theory on how margins and paddings can be used to best effect. So stay tuned.