margins & paddings pt1/an introduction
published on:February 22, 2008 / 13:01
back to overviewWhen 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:
quote Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas unquote
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.
Article info
External sources
contact me
If you want to send me a quick message or you have any questions, don't hold back.
articles in css techniques
the archive
All my articles are neatly filed inside the archive. Search and filter your way to the articles you want:
5 comments in total
Hi There, I have seen this technique used for creating space which could be interesting to you, its just another alternative to adding white space to a content area. What do you think?
Okay I think that will at least show you the idea and code you could use for the example.
CSS
#box ( background-color: #69d6f5; position: absolute; top: 100px; left: 100px; width: 200px; height: 200px ) .space (border: solid red 1px; margin: 20px)HTML
<div id="box"><div class="space">I some space around me, much better </div></div>From what I can see I think it's a little overkill. You might avoid some of the box-model problems using the second div but apart from that it is unneeded and just bloats the code.
My take on it is that margins are used to create space between elements whereas padding is used to create space inside elements. So in the absence of bg-colors of borders it might seem that the two are interchangeable, but by using padding you're only creating the illusion of space between the elements' borders (or the content's boundaries if you like).
I don't think it's an "illusion" of space. Only the perspective is different. In the case of paddings, the parent element is pushing its children away. In the case of margins, the children are pushing themselves away from their parents and siblings. But both methods are used to create space all the same.
* required fields