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 trialAdham Hammoud
738 PointsHi, I don't know how did Mr.Nick defines all these percentages like width, margin and padding..etc, How can I know that?
As ex. Mr Nick, gave the margin as example 45% of gallery on what bases, he did that ?
Lori Harvey
3,123 PointsIn this case he chose 45% because there are two columns and each image gets to take up 45% of the 100% available, and the remaining 10% allows for the margins around them.
1 Answer
M. Cotter
6,179 PointsHi Adham,
Nick chose to use 45% because he wanted TWO columns of equal-width.
45% + 45% = 90%
He then added 10% worth of margin.
90% + 10% = 100%
Another way of looking at this is:
(column 1) + (margin) + (column 2) = 100%
45% + 10% + 45% = 100%
Basically, he is ensuring that the content, altogether (including the columns AND margins), adds up to 100%.
You can break this down into various combinations such as:
(column 1) + (margin) + (column 2) + (margin) + (column 3) = 100%
30% + 5% + 30% + 5% + 30% = 100%
OR
(column 1) + (margin) + (column 2) + (margin) + (column 3) + (margin) + (column 4) = 100%
20% + 5% + 60% + 3% + 10% + 2% = 100%
... as long as it equals 100%, you are good to go!
I hope this helps answer your question. If it does, please remember to mark my answer as the Best Answer! :) If not, let me know if you have a follow-up question and I'll do my best to respond.
M.
Amandeep Dindral
8,915 PointsAmandeep Dindral
8,915 PointsTake a look at this. It's called a box model. This really helped me grasp margin, padding etc.
http://www.w3.org/TR/CSS21/box.html
Let me know if this helps explain css properties a bit better!
Cheers