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
Jason Miller
11,311 PointsShould you ever give an HTML containing element a height?
The best way I could describe what I mean is through an example. Say your working on a website and you have a header/nav bar area at to top of your page. It contains a logo and some nav links. When styling the header area with CSS, should you set a height of say 80px or just allow the content of the header area (logo and nav) to dictate the height? If no height is to be set then would spacing above and below the content (if needed) be created by adding padding to the top and bottom of the containing element or on the elements it contains?
1 Answer
Eric Buchmann
15,080 PointsIt really depends on how you want it to look, since CSS is taking care of how things look. You don't HAVE to add a specific height to an object because objects inside of it will automatically make the parent object expand in height. Also, if you set the height to 80px and the child elements are actually larger than that then they will break out of the parent element if it has a fixed height.
For extra spacing above or below the content area you would use padding. The model goes like this: content -> padding -> border -> margin. Margin would also work, but it depends on how you want it to look and function.
Jason Miller
11,311 PointsJason Miller
11,311 PointsThanks for the reply Eric. I was just curious what other people had to say about this. I think personally it would make more sense to just add margin to the top and bottom of the containing element if you require space above and below the content. That would mean like you said, the content would automatically make the parent container expand in height but by adding padding top and bottom this way, it would mean no matter what content it contained (if it changed at a later date or was dictated by a CMS) that there would always be spacing above and below.