Margins and Padding
June 6th, 2010They say content is king, but you might as well write about putting bed sheets on fir trees if it’s hard to get to the important bits: the content. People just aren’t going to want to come back to your website, or read more if your content is unappealing, and/or it’s too much hassle to navigate around.
This is where I think margins and padding are important in web design, not only for cleanly separating content pieces, but also in making everything align perfectly. And if you aren’t using margins and padding correctly, you may not know what a difference these two things can make. I think the best way to illustrate this is through pictures; let’s take a look at some web design with and without smart use of margins and padding:
and here it is, corrected:
Keeping in mind that this example is very basic, you can see the difference on presentation that the margins and padding give the mock-up page. Now, while suggesting that you use margins and padding, I think I should give you a tip for applying these two styles across your page(s). Be consistent! Even though the extra space can make it easier on the eyes, you can still go wrong by being inconsistent. When you’re building or touching up your website, be sure to note somewhere the numbers you want to use. Trust me, it will look so much more clean if you stick to 10px and 15px margins and borders (for example) than if you pick and choose the numbers seemingly at random.
Sorry for the simple tutorial this week folks, I’ll try to make a more interesting one with PHP or jQuery or something next week. Hopefully this helps you out — let me know in the comments.
Leave a Reply
Comments with two or more hyperlinks are held for moderation before being published.