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

Ahmed Hassan
Ahmed Hassan
5,533 Points

Guys, Do I have to set width and height properties to each element on my html so it can take up space in the webpage ?

In my .css file, I tried to change the background-color of the "body" element and nothing happened. I tried to inspect the body element using Google Chrome and I found that the body element isn't taking any space on the page, so when I sat the width value of the body element.. the background color changed.

I noticed this issue with most major parent elements such as: html, body, section, div..

Thanks for your support

3 Answers

Flavio Carvalho
Flavio Carvalho
26,636 Points

Hi Ahmed, I think a good answer to your question is "yes ... and no".

No you don't have to set width and height to EVERY single element, that would make your code rather bloated and it's unpractical. But they* (body, div and etc) do need content inside of them to show on the screen, otherwise they are just empty and have no reason to show up. They're there, but unless you put some text or an image (a placeholder) elements are basically collapsed.

At the same time you can set width and height to elements if you want to force them to show at such width and height... I usually do that if I want to see how much space a div is going to take on screen! That way, usually they don't need content inside because you're telling them to be 'x' width and 'x' height.

So it really depends on what you're trying to achieve :) Do you want your element to be a certain size: set the measurements on CSS; Do you want your elements to take up the space that your content does (you should be setting some margins and paddings anyways): then place your content on your HTML to see it on the page.

Hope this sheds some light.

Ahmed Hassan
Ahmed Hassan
5,533 Points

Hi Flavio

Thanks for your well detailed answer. It certainly did shed some light :)

Hi Ahmed.

Many html elements will not take any space without any content in them. That is unless you specify height and width in css. Have you tried using mock content as a placeholder while building your site?

Ahmed Hassan
Ahmed Hassan
5,533 Points

Hi Gary

Yes I tired to put a placeholder contents, but it was a <nav> contents.. seemingly, the body element doesn't take the <nav> element as a placeholder for its designated space. So I put other elements like divs and paragraphs and the it worked.

Thanks for your support :)