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
Brad Will
534 PointsWidths, PX, ems and anything to do with heights.
Well, before anything is said, I'm not bad at maths. I'm exceptionally good when it comes to adding up and not bad at algebra, but I'm struggling with widths, PX, ems and heights.
Can anyone explain what this would do and explain in more details. Thanks!
body { text-height: 5px 0 0; }
Thanks again.
3 Answers
Gareth Redfern
36,217 PointsHi Brad, what you have posted is not valid CSS. You maybe referring to line height?
You can see more about line height at; http://css-tricks.com/almanac/properties/l/line-height/
You can also add height to elements by using the a height property and by also adding margin and padding to the bottom and top of elements.
An example might be:
body {
height: 500px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
You will want to look up how the box model works to, I suggest watching: http://teamtreehouse.com/library/css-foundations/the-box-model/the-css-box-model-concept-3
Brad Will
534 PointsApologies. I didn't mean to use 'text'-height. I'm learning so I guess it'll come with time. I want to know more about how padding works, margin works, height works, etc.
Thanks, Brad
Gareth Redfern
36,217 PointsHi Brad, sure no problem : ) I have added to my comment with a bit more information but I would suggest looking at http://teamtreehouse.com/library/css-foundations/the-box-model/the-css-box-model-concept-3
Adam Sackfield
Courses Plus Student 19,663 PointsFor a better understanding of how margin, padding work you should read up on the box-model here and also box-sizing property here I like to set box-sizing in the following way.
*, *::before, *::after {
box-sizing: border-box;
}
This is my preferred way as it works in the following way. Say you have a div with a width of "600px" and a height of "600px". Having the above setting will keep that div at that size regardless of padding added to it, whereas without it adding a padding would change the actual height and width and cause some confusion. The links I added should give you a better understanding of these.
Brad Will
534 PointsThanks! I'll take a look now.
Adam Sackfield
Courses Plus Student 19,663 PointsNo worries man! Let me know if you need any clarity in anything you read and I will be more than happy to discuss :)