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

HTML

Posted by ub46473788
ub46473788
8,782 Points

Simple HTML/CSS Question re: :How To Make a Website" project

Hey there. I've finished the course "How to Make a Website" and have uploaded the result, with some modifications, to my personal website. Basically, I just want to use it as a springboard into more complicated web development. Baby steps, though. Anyhow, I'm running into a problem with the basic formatting of the index.html page, probably as a result of something I've got in my CSS, I'm guessing(?).

So at the end of the How to Make a Website course you've got a simple portfolio site with three pages - the portfolio page at index.html, a contact page, and an about page. On the portfolio page, you've got a header with a bottom-border, a heading, and a navigation bar. All of this is contained within the header. Below that you've got a 'gallery' -- a list of some photoshop projects provided by the Instructor of the course, as a template for students to build on. I've removed the gallery and wanted to insert a block of text, but when the moment I insert a 'p', the header drops down about 5-10px and there's a little bit of whitespace above the header. I have almost no idea how to stop this from happening. The thing is, this only happens on the portfolio/index.html page. The other pages are fine -- no whitespace above the header. I noticed that on my 'about' page, before I have a 'p' element, I have an 'h3' as a heading for the page. So, basically, my question is: Can someone explain why I having an h3 element prior to any paragraph elements prevents the header from being bumped down, thereby leaving whitespace above it?

I'm skeptical of the quality of my explanation, but would really like an answer to my question. If there's any other info I can provide to help you to help me, please let me know. Thanks in advance for your help.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Do you know how to insoect HTML elements with Chrome DevTools? You can then add styles on the fly and test how they will look in the browser... In real time. It'll help you isolate the margin collapse going on and fix it. Probably by adding a top margin CSS property. :-)

ub46473788
ub46473788
8,782 Points

I tried this and it didn't seem to work. The DevTools were helpful a little, in showing which element seemed to be pushing things around. But the steps I took to try to fix it - adjusting margins as you suggest, didn't work. Only after I included an 'h3' before the 'p' element, did the whitespace disappear. Essentially, I've fixed the problem, but I don't understand how or why it's fixed -- that's what I'm really after. Thanks for the suggestion, though.

Andrew Fellenz
Andrew Fellenz
12,170 Points
Andrew Fellenz
Andrew Fellenz
12,170 Points

When you remove the gallery, please add this css line to your styles.css:

h3 { margin: 0; }

That should resolve this issue.

ub46473788
ub46473788
8,782 Points

Thanks for the suggestion. My css did already specify a top, right, and left margin of 0. The only margin I had for my h3 was a bottom margin, which I think is pretty essential to the layout in other parts of the page.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

if you give an element a specific top-margin it won't affect the bottom margin already on your element. That's the beauty of those elements.

Of if you use a margin short hand with 4 values you can control the specific margins of an element that way.

h3 {
  margin: 0 0 0 0;
  /*top, right, bottom, left*/
}
Andrew Fellenz
Andrew Fellenz
12,170 Points
Andrew Fellenz
Andrew Fellenz
12,170 Points

Please try giving your h3 a top margin of 0. It might be inheriting something in your css that you were unaware of. It will not affect the other items in your css, with the exception of the overall size of your page.