Welcome to the Treehouse Community
Looking to learn something new?
Harold Irizarry351 Points
CSS margins, max width, padding
I would like to know how I can learn to set the right numbers (ex. max-width 940px, padding 0 5% etc etc) for the max width, margins and padding on my CSS.
Nick set the max width to 940px, the padding to 0 5% and margin to 0 auto. Are these numbers standard for every code? How do I know when to put 940 or maybe 1000px? or less than that? or setting the padding to 1 10% instead of 0 and 5% just like how he did it?
I would like to know this before I continue with the videos. Thanks so much!!!
Cory Harkins16,486 Points
Width and all that jazz will be dictated by... YOU!
There is no real standard, as you will be designing your entire layout based on the functional demands your site/product needs.
Padding allows for a bit of breathing room between the content and its container, typographic design is a process that requires MAXIMUM readability. Users eyes get tired (yes, literally tired) when reading a sentence that goes across the entire page. Similarly, the Users brain will get tired of trying to mentally separate text if it's butted up against a line. So padding can offer some nice space between the content and border (visible or invisible) of its container.
The same thing goes for margins, imagine images butted up against eachother, that would suck trying to dictate if it's two separate images or one panoramic view. The choice is ultimately yours.
When Nick designed his site, he had already worked out the layout with pencil and paper, then did a mock-up draft in Photoshop, so by the time he got ready to code, all the work was done.
I would suggest finding sites similar to the one you wish to build (now or in the future) and observe what is in your opinion wrong, or right, and that will give you some idea of sizing. Also, if you go into the library tab of the nav bar, there is a whole course on design. I believe the answers you seek reside there. :)
I hope this helped! Good luck in your journey!