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

CSS

Posted by Jake Porritt
Jake Porritt
10,356 Points

Unwanted space between page sections

I've been creating a one page website that scrolls between different divs for the pages. But I've been getting some unwanted space between my "pages" and I can't figure out why.

Can anyone help??

Here's a snapshot of my workspace https://w.trhou.se/pygy0erjy9

Marisa Zantey
Marisa Zantey
2,053 Points

It could be padding or margins causing it, but its hard to tell. Do you know how to take a snapshot of your workspace?? It would make it much easier for us to find the problem :)

(If you don't know how to, check this out- https://teamtreehouse.com/community/workspace-snapshots)

rydavim
rydavim
18,814 Points

I'm not clear on the space you want to get rid of. There aren't any obvious graphical glitches or imbalances. Can you elaborate on the space you want to eliminate?

Edit - Your index.html file is linking to files that are not present in your workspace snapshot. If you're using additional files, you'll need to upload those to workspace as well so that we're seeing exactly what you're seeing.

4 Answers

Jake Porritt
Jake Porritt
10,356 Points
Jake Porritt
Jake Porritt
10,356 Points

Here's a snapshot of my workspace

https://w.trhou.se/pygy0erjy9

Marisa Zantey
Marisa Zantey
2,053 Points
Marisa Zantey
Marisa Zantey
2,053 Points

Aah sorry I just realised how many more points than me you had haha. I don't know JavaScript, but I know a fair bit of HTML and quite a bit of CSS. But maybe try fiddling with the margins and paddings. I noticed you had some there, so maybe you need to adjust that a bit!! (Maybe try playing with display:block and display:inline, because if you have any it could be the cause, or maybe you should have some where you don't. Maybe even try having negative margins and padding (eg. margin: -15px), which pull other elements towards the element you are applying the CSS to, rather than creating more space.

Sorry if i'm no help, but I thought I might try having a crack at solving other people's code problems... just to test my skills a bit. Good luck :)

Marisa Zantey
Marisa Zantey
2,053 Points
Marisa Zantey
Marisa Zantey
2,053 Points

Also i'm not sure if you're familiar with it or not, but when you preview your site from the workspace, right-click and when the dropdown menu comes up, click on 'Inspect Element' at the bottom. Once the tab comes up, on the top left there will be a magnifying glass icon. Click on it, and you can see the margin, padding, etc. of all the elements when you hover over them. When you're done, click the "x" on the top right. It really helps when you have a problem and don't know what's causing it ;)

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

Or f12 when on chrome for the developer tools. Is it worth adding a normalize css page? This would remove all of the default padding and margins and stuff to your elements because lots of elements come with default padding and so on so that when you style with your css it will not be adding to any default padding and so on that may already be affecting the page layout

Richard Nicholls
Richard Nicholls
1,301 Points

Sorry just realised you have a normalize css page