Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Widths, 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
Gareth Redfern
36,217 Points

Hi 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

Apologies. 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
Gareth Redfern
36,217 Points

Hi 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

For 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.

Thanks! I'll take a look now.

No worries man! Let me know if you need any clarity in anything you read and I will be more than happy to discuss :)