Padding the Margin
The box model is probably one of the least understood items when it comes to web development. It is certainly the most frustrating if it doesn’t seem to behave. It’s a tool, and like all tools, it works best if used as intended.
When developing websites, people tend to try and bend the browser to their will. They are fighting the tool rather than working with it. Part of this phenomenon stems from not getting to grips with the power of the box model, most notably Margin and Padding.
There are two tools here, actually, and to the uninitiated they do the same thing; create white space around objects. This seems redundant if you don’t know why this is. There is actually a very good reason for this, and it becomes most apparent when designing for a CMS.
Work with a CMS
I strongly believe you should always build upon a CMS. Even the smallest site. There are two reasons for this:
- A CMS, a good one, forces you to use the web as intended; a collection of loose elements tied together, rather than emulated print, or on-line magazines. People simply don’t use the web this way and neither should you design as if they do.
- No matter how clear-cut a project, there are always revisions and add-ons, and you’ll be glad you used a CMS when you get told about yet another “small change” on Friday, right before closing time.
Elements in a CMS
A good CMS treats your site as a collection of loose elements and lets you pull them together, like Lego, on your site. So the most efficient way of working with a CMS is to treat your design the same way.
I’ll explain what I mean by that, but first the box model:
As you can see, or if you can’t, what I’ve drawn here is three boxes inside each other. The inner box is the padding, and will contain your content. The middle box is the border and can be used for styling edges and borders. It is often thought of as the actual boundary of the box, but this is not true. The outer box is the margin.
Now, to help you think about this in a helpful way, I’ll simplify matters by stating that the padding works inwards. It pushes content away from the border. Margin works outwards, it pushes other elements away from your box.
People use hacks which involve negative margins (unavoidable at times) and negative padding (silly and sign of incompetence) but this is stuff for another article.
Margin-thinking step by step
When you design, think of your white space. Decide how much of it you want between elements and resolve to apply this rigorously. Not only is this just good design, it helps a lot in reducing the puzzle that is any site with more than a few elements. Just do it, you’ll thank me later.
Having decided that, apply a universal margin style and resolve to leave margin alone from there on.
Now you decide which content goes where and think of all your types of content as little boxes holding your presents to the world. Decide how and where in your CMS they are going to live and apply.
Now, if for whatever reason you need more white space, use padding. Apply padding to elements individually. Padding is your margin, padding will give you the flexibility you need.
Boxes used for site-structure (columns, separators, etc.) get no padding or margin at all. They are invisible little structural beams like the bars of a cage. Also be rigorous here. Don’t cop out and use quick-fixes like giving structural elements some padding. It may save you a few lines of code now but you’ll be stuck in a Chinese puzzle later.
The result
Now, when you set up your site structure and start pulling content from the CMS and placing it you’ll find you can predict exactly how its going to behave and you’ll find the actual building stage a breeze.
You might even find that the bane of many developers; the fluid layout, becomes easy. You are working with Lego’s, and the Lego bricks do what you want them to do, always.
Happy web building!
No Comments yet.