margins & paddings recap

I started my series about paddings and margins on February 22th. It took me more than a month to get where I wanted to get. The series ran through 5 articles, resulting in a favorable solution. Lots of effort went into this series and quite a lot of time passed since the start, so I figured a nice little recap would be interesting for the people just joining in.

This whole series started when I got tired of messing around with paddings and margins in pretty much random fashion. So I began to look for a logic behind the usage of paddings and margins. Here's the result:

1. 01. paddings & margins pt1 / an introduction
2. 02. paddings & margins pt2 / guidelines
3. 03. paddings & margins pt3 / solution 1
4. 04. paddings & margins pt4 / solution 2
5. 05. paddings & margins pt5 / the final solution

The first article I wrote defined the problem I was facing. It talks a bit about the box model and defines the purpose of paddings and margins, underlining the common elements and the differences between the two. The second article talks about specific guidelines that would have an important impact on our quest for a good margins/paddings solution. These guidelines proved crucial for the solutions that would follow.

The first solution was pretty basic, declaring the padding on the parent element and fixing the remaining spaces using margins on the children. A decent solution, but pretty quickly several problems raised their heads. One thing that bothered me was the fact that the first child had to receive a special treatment, which was especially hard to accomplish in IE6.

The second solution fixed this by removing the top padding on the parent element. A good fix that brought up a new problem with collapsing margins and clipped backgrounds. Another issue that remained with this solution were the negative margins on the children needed to override the padding on the parent.

The third solution turned everything around, making maximum use of collapsing margins. The padding on the parent was removed and all children were given full margins. An almost perfect solution, if it were not for the clipped backgrounds. An annoying problem that can be fixed, though no good generic solution for this problem exists.

If anything, I hope this series got people thinking a bit more about paddings and margins and how the use of them influences the css. I like the final solution, I've used it a fair few times and it has made my css files a lot easier to comprehend. Hope you enjoyed the series.