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 Aurelian Spodarec
Aurelian Spodarec
7,369 Points

How to delete the white space between the block in HTML? i use normalize.css and the white space is still there . It sho

How to delete the white space between the block in HTML? i use normalize.css and the white space is still there . It should touch each others by shoulders .

code http://codepen.io/anon/pen/ykdfs

4 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Aurelian.

The normalize CSS library is working fine, the reason you still see the space is because the <h1> has a top margin which is pushing your elements apart, I've forked your pen and updated it with a class of child and have set overflow: hidden as the property clears collapsed margins and contains them within the parent instead.

http://codepen.io/ChrisUpjohn/pen/Fhpqa

James Barnett
James Barnett
39,199 Points

Chris Upjohn -

The normalize CSS library is working fine

In @Chris Upjohn's pen he's using codepen's built-in normalize.css feature.

In Aurelian Spodarec's original codepen he's using a link tag to a file instead of a URL so your web browser is getting a 404 file not found and thus the normalize styling isn't being applied.

You can check this by opening up devtools and looking at the console.

Chris Shaw
Chris Shaw
26,676 Points

I should have put a little more context ahead of that when I initially answered, I understand what you mean though James =)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The path to your normalize.css file isn't a URL so your web browser is getting a 404 file not found and thus the normalize styling isn't being applied.

You can check this by opening up devtools and looking at the console.

Chris Shaw
Chris Shaw
26,676 Points

CodePen doesn't require you to include the <doctype> and such in your HTML, in my forked pen I removed all that and simply included normalize using the built in libraries.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

It suprizes me .Thank you for solving it out , i had no clue whats happening and why that h1 is messing it up : p I know why i had that , because i guess im using HTML5? and before i did just used only HTML with div header etc.. One question, whats the difference by using HTML5 insted od making div ?? insted of header make div header . ?

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Its kinda the nuclear option but this will work:

* {
    margin: 0;
}
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

uh? before i fogot how to propery layout pages , i remember that i never had problem with it but i never used * and then applay it :/ though this works fine so i hope it wont get messed up if it does anything :p thank you for your answer ^^

Chris Shaw
Chris Shaw
26,676 Points

Using a selector like this isn't recommended as it's costly to the browsers performance when parsing the CSS, it's recommended that any time you need something like a margin removed you use a class that shares these styles as the browser only has to parse it for those elements and not everything on the page.