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.

HTML

Annoying space around section

So I'm working on my first site, it seems to be going well although I can't seem to get rid of this annoying space around my section. Here's the code, if someone could explain why this is occurring and how to fix it that would be great.

HTML:

<head> <meta charset= "utf-8"> <title> Text </title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <header> <a href= "index.html"> <h1> Text </h1> </a> <nav> <ul> <li><a href="index.html"></a>Portfolio</li> <li><a href="about.html"></a>About</li> <li><a href="contact.html"></a>Contact</li> </ul> </nav> </header> <div> <section> <p>This will be my main page.</p> </section> <footer> <p> © Text </p> </footer> </div> </body> </html>

CSS:

h1 { background: #660080; color: #FFFFFF; font-family: "Allura-Regular", serif;
}

nav { background: #D633FF; }

nav a { text-decoration: none; color: #E0B2F0; list-style: none; }

ul li { list-style-type:none; }

nav li { display: inline-block; }

a:hover { color: #660080; background-color: transparent; text-decoration: none; }

header { background: #AD33D6; margin: 15px 15px 15px 15px; }

section { background: #EB99FF; color: #660080; margin: 15px 15px 15px 15px; height: 350px; }

body { background: #F5CCFF; margin: 15px 15px 15px 15px; }

footer { background: #660080; color: #FFFFFF; margin: 15px 15px 15px 15px; }

Daniel Rothery
Daniel Rothery
3,440 Points

Your code either hasn't pasted correctly or is written wrong. Could you re-post your full HTML code as its very difficult to see whats going wrong when much of it is missing.

(There's no HTML, HEAD, BODY, SECTION tags etc)

2 Answers

Weird I know I don't have much HTML since I've only just started but I've definitely got those tags and they're not showing up here... is it cos I copied and pasted them from TextWrangler? I tried copying and pasting it again but it didn't do any good.

Daniel Rothery
Daniel Rothery
3,440 Points

Are you surrounding your pasted code with the tags to display code on the forums? look at the "Markdown Cheatsheet"

Daniel Rothery
Daniel Rothery
3,440 Points

I'm not sure why it isn't pasting :(

Try playing with your margins. You have 15px margins around many of your tags which is going to push other "boxes" away.

So for example if your code had tags:

<header></header>
<section>/section>

They would have a 30px gap between them with your code because of your margin tags.

Also note you have margins like:

footer { 
margin: 15px 15px 15px 15px;
}

These can be shortened to:

footer { 
margin: 15px;
}
Daniel Rothery
Daniel Rothery
3,440 Points

Oh bummer, missed an < in my section tag above!