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
Ryan Decker
3,451 PointsFrustrated with CSS :(
This is the only HTML I have on the page (besides the global structure) is an H2 inside my header.
This is the only CSS styling I have in my CSS file:
header {
margin: 0 0 50px 0;
width: 100%;
float: left;
border: 10px;
}
header {
background: black;
}
h2 {
color: white;
margin: 20px 0 20px 20px
}
When I attempt to add anything else to my document outside the header (like a paragraph) I get white space above my header.
I have tried using the Google Chrome DEV tools to see what is going wrong. What I see in the dev tools is that the element (say the paragraph I am trying to add) extends above the header causing the white space. I'm not sure why this happens or how to stop it.
Thoughts???
6 Answers
James Barnett
39,199 Points> What I see in the dev tools is that the element (say the paragraph I am trying to add) extends above the header causing the white space. I'm not sure why this happens or how to stop it.
The solution is simple, remove the default margin of <p>.
p { margin-top: 0; }
working demo: http://codepen.io/jamesbarnett/pen/Foria/
As for the why I've never understood it, I think it might have something to do with collapsing margins because if change it to </header> <p> the margin goes away.
Ryan Decker
3,451 PointsI can't seem to get the CSS to work. When I input the code, nothing happens.
BUT, the exact CSS I have is at the top of the page.
The only thing missing is the
```<p> This is a paragraph </p>
in the html
David Tonge
Courses Plus Student 45,640 PointsTry this out.
header {
margin: 0 0 50px 0;
width: 100%;
float: left;
border: 10px;
background: black;
}
h2 {
color: white;
margin: 20px 0 20px 20px
}
p{
clear: both;
}
Ryan Decker
3,451 PointsDavid,
I forgot to mention that I used Normalize.css.
What I am having an issue with is why the size of the "box" or the space the actual element is taking up (in this case the paragraph) is extending though the header. DEV tools is showing that the paragraph box is extending past the bottom margin set in the header and to the very top of the page.
I got rid of the white spacing above the header (caused by the paragraph) by removing the margin on the top of the paragraph.
But, when using dev tools the actual space the element (paragraph) in taking up, once again, is extending to the top of the page, past the bottom margin I have set in the header.
This is VERY confusing to me!
Also, can you explain how to use "markdown?" I can't ever see to get it to work, even though I've read the cheat sheet.
Thanks!
James Barnett
39,199 Points> Also, can you explain how to use "markdown?" I can't ever see to get it to work, even though I've read the cheat sheet.
Have you check out this thread on how to type code in the forum?
David Tonge
Courses Plus Student 45,640 PointsWell I guess I'll start with the markdown question then I'll ask you about your code.
When I edited your code; the syntax you used was correct with a small typo you used " ,,,css " instead of " ```css"
Now about the code. Are you using floats in your header?
Ryan Decker
3,451 PointsThanks for clarifying the markdown. What is the character that you are using? Is that a singe quotation mark?
As for the code, I am using a float-left in the header. Inside the header I have the h2 tag with a short header.
Directly after the header I have a <p> tag with one sentence. I guess what I am trying to figure out is if it is normal for the "invisible box" (or space that the paragraph takes up) that contains my paragraph to extend so above the header.
I understand how to remove the white gap that was being caused by the paragraph's margin.
David Tonge
Courses Plus Student 45,640 PointsThe character used was the backtick it's usually next to the "1" key. When you float an element you change the flow of your document. This should help you understand if my explanation isn't clear. http://css-tricks.com/all-about-floats/
Ryan Decker
3,451 PointsDavid,
If I don't float the header in the first place, do I need to clear it?
And in this case, since I am using the header with a float left property, wouldn't the clear:both remove the float, rendering its use pointless in the first place???
Thank you for clarifying the back ticks!
David Tonge
Courses Plus Student 45,640 PointsCreate a http://codepen.io/ of your code and post the link here.
Ryan Decker
3,451 PointsJust testing out the Markdown!
<p> Graph </p>