margins & paddings pt2
In part 1 of this mini-series I tried to explain the problems I've been having with paddings and margins. But before we start looking for solid solutions, I think it's good to explore some of the elements that constitute a solid solution.
This article will dig deeper into the theory of using paddings vs margins and the things we should be taking into account when looking for a good solution. Bear with me.
guideline 1: relating elements
Whenever you're applying paddings or margins you're always shaping a relationship between two or more elements. There's always a parent (container) and a child which are being positioned away from each other. And sometimes adjacent children that need to be taking into account. Something to remember as paddings and margins are declared on one single element. The other elements are often defined implicitly.
guideline 2: do the shuffle
The first guideline becomes important when you're shuffling around elements from one context to another. In this situation, design should mimic real life as children should conform to the rules of their parents. A styled element should not decide how to behave within its parent but a parent element should decide how its children behave. With this rule in mind your css will allow for much greater flexibility.
guideline 3: 1 measure = 1 value
1/ div p {margin-left:1em;} 2/ div p {margin-left:0.5em; padding-left:0.5em;} An important css guideline that should be taken into account. Whenever whitespace is needed, we need to define it in one singular statement, not as a sum of several values. If you consider the second declaration above, your css will become a mess pretty quickly, so it's best to avoid such declarations unless a design really asks for it. The first declaration is obviously the best option.
guideline 4: adapting css
1/ div {margin:1em;} 2/ div {margin:1em 1em;} Another important css guideline but one that is a lot more difficult to anticipate. Looking at the rules above, the result will obviously be the same. And yet there is a difference in maintainability of the code.
The first statement implies that all margins of an element will be equal. This means that when the value of the margin changes it will need to change for all margins. This is different for the second declaration, which only implies a relationship between the horizontal and vertical paddings.
1/ div {border-top:1px solid red; border-bottom:1px solid red;} 2/ div {border:1px solid red; border-left:none; border-right:none;} The code above is another good example of how this guideline can help to make your css more maintainable. The first rule implies no relationship between both borders, while the second one does. When the border color changes, you will only need to adapt one value in the second declaration while you will need to adapt two values in the first declaration.
This is actually one of the most difficult things to learn in css (at least, it was for me), but when using it well your css will be much easier to maintain and less prone to errors. This rule will be one of my main guidelines in finding a solution to my margins and paddings problem.
guideline 5: away with theory, does it work?
In the following articles I will be using methods that are sometimes not supported by all browsers yet (read not supported by IE6). I don't think this is a real issue as the question is pretty much based on theoretical grounds, though I will be providing css as I think it should be and hopefully also a couple of workarounds to make certain methods work in all current browsers (so including IE6).
so what to expect
In the next couple of articles I will have a detailed look at several methods of applying margins and paddings, comparing the positive and negative elements of each method based on the guidelines above. I hope to receive extra input from you and hopefully we'll have a solid way of applying margins and padding at the end of this mini-series. Let the experimenting begin.