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 Martin Dahl
Martin Dahl
2,122 Points

Build the Contact Page issue

Hey guys,

I am currently at the "Build the Contact Page" working my way through "Adding Pages to a Website" and I have come across a rather annoying issue, which I cannot figure out why happens :(

So bascially when I delete the whole section to create a new one for the contact page, everything looks normal when I refresh the wesbite to have a look at how it looks. However, when I add <h3>General Information</h3> in the first section (you create two sections during this part), suddenly a gab between the top of the wesbite and the header appears. What could be the reason why this happens? :(

Martin Dahl
Martin Dahl
2,122 Points

Alright, I think that I have figured it out. I had some code in my CSS file, which was written incorretly (I have no idea how that may have happened :i), however, now the gab only disappears if I add the line: <h3>General Information</h3>. This is super confusing...

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Please post your code or a fork snapshot. The fork snapshot is on the upper right corner of workspaces. The proper way to format quotes here is described in the Markdown Cheatsheet, linked below.

1 Answer

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

Hi there,

As others have said we'd need to see the code to be sure but it sounds to me like a simple case of stray margins in your HTML elements causing the gap.

Each element has a certain default size in each of its layers. The layers from the inside to out are content, padding, border, and margin. And they each make up the total size of any element in a HTML document.

The biggest culprit is the margin. So in your CSS you should try and apply a margin of CSS on your element or it's parent element.

p {
   margin: 0;
}

Good luck. :-)