Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Padding

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

margins and padding

I am taking many of the CSS, Javascript, and general website videos on Treehouse. The most recent course being Web Typography. While the technical side of things is explained well in most cases, one thing that I've never seen addressed is how padding and margins are decided. For example in many of his tutorials Guil will say something like '..we'll just give this img container a bottom margin of 20px". But there will be no explanation of why he's using 20px or how he's come to that value, and then, as if magically, the page designs he uses in the tutorials look great. My page designs don't usually look as good. So, would Guil, or somebody more experienced than myself, be able to offer some explanation as to how to decide on margin and padding values? I'd be grateful for any advice!

3 Answers

Kevin Faust
Kevin Faust
15,353 Points
Kevin Faust
Kevin Faust
15,353 Points

its all pre determined before the videos. generally speaking, no one is able to perfectly know what margin and padding to know on their first try You generally will do trial and error (try a margin/padding, check how it looks, and just keep changing the values until you get the desired design outcome).

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Kevin,

So basically, in you opinion it comes down to going with what looks/feels right?

Kevin Faust
Kevin Faust
15,353 Points
Kevin Faust
Kevin Faust
15,353 Points

definetely. there is no right and wrong answer. i am working on a basic site now and in regards to my margin and padding, i have to try at least 10 different values (sometimes more) before settling for one.

Mattea Turnbull
Mattea Turnbull
4,134 Points
Mattea Turnbull
Mattea Turnbull
4,134 Points

To an extent, yes. For complex designs, you'll have better success first designing inside photoshop/illustrator/fireworks and then recreating your design with css. In this case, you can make it look great, and then grab your numbers after. You'll get a much better product. After time, you'll find you can do a few simpler things without predesigning, even just approximating what you need by looking at the screen. Also, if you aren't using 'inspect element' inside Chrome to help you try out margins/padding/etc, I strongly suggest it.

Claudine Bananal
Claudine Bananal
1,756 Points
Claudine Bananal
Claudine Bananal
1,756 Points

Yes, it's usually trial and error. It's best to have a design comp as reference/guide, which you will if you're working on another person's design. I think if one does it often, the person gets used to it and almost always get the right estimate just by looking at the design. There's also a page ruler on Chrome App or even Photoshop that you can use. :)