when developing websites, how do I know how much padding and margin do I need to set

Hi Rizwan,

Typically your paddings and margins will depend on your overall site layout or more specifically, the "grid" of your design. Typically when learning front-end web development, its natural to stray away from a grid layout in favour of what looks good to your eyes.

If your new to grid systems, what they mean, or what they offer. Check out this article on Smashing Mag, it covers the basics and goes a little deeper. It's a good read and will give you a better understanding of what grid is.

Grids are made up of columns, typically you see some frameworks that state they use a "twelve column grid". An easy way to think about what a column is, is that it's basically a vertical bar that goes from the top to the bottom of your site design. This bar will have a width equal to every other column in the grid. What's important is that the elements you add to your site design, whether they be text boxes, tables, pictures or anything else. They all line up with your columns in your site design. This gives you a nice smooth, flush design so all of your content flows naturally down the page.

The other term you hear a lot with grids is the "gutter". The gutter is simply the spacing between each column in your grid. So for example you may have a twelve column grid with "x" amount of gutter width between each column.

Ultimately if your following a design that uses a grid system, your margins and paddings will come pre defined from the grid your working off. To start off you can even make your own grids, just remember to follow the principle that everything should line up vertically, nice a smooth :)

Check out this article on grid systems I mentioned earlier for way more info.

http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

Good luck!

James

Experience...there's no rule. It's what looks good. You'll soon start to learn what 10px and 40px looks like or if 1% or 2% is what you need. It's all just trial and error and experience.

One more thing... If you're designing in Photoshop (or GIMP) you can measure distances between your elements to see how far apart they are and use those measurements to calculate your margins and padding. But this will give you a site with fixed dimensions. To get flexible dimensions, you will need to use ems or rems...which is covered in the CSS deep dive.

+1 to all of the above. I wondered the same thing starting out. Now, I just kind of eye-ball how much space it need and wing it. Or you could use a tool like Xscope (if you have a Mac). It has some pretty useful tools to calculate it for you.

Thanks to everyone who replied :)

Just wondering whether you guys can suggest some tools that can come in handy while setting up the layout

There's no fixed numbers you can use. It all depends on the design. Layout the design in wireframe in photoshop for a start. Does it look too cramp or is there too much white space? And it all depends on your design sense.

Or you might want to follow Twitter Bootstrap or Foundation for their template, which has been optimised.