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
maayan malka
2,454 Points"build a website" files: why when I remove "padding and margin : 0;" on #gallery, there's a white space above header?
on the main.css, remove the lines below #gallery that says margin:0; padding:0;
and there will be a white space above the header of the website.
I don't understand why the #gallery object size is bigger then it's container.
9 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi maayan,
This is due to the floated header not being cleared.
When your remove the 0 margin from your ul then it goes back to having a 1em top margin from normalize.css. This is what produces the gap at the top.
Since the header is floated, it means that the content boxes for the wrapper div, the section element, and the gallery ul all extend to the top of the header. So a top margin on any 3 of those elements will extend upward from the top of the header producing that gap.
The solution is to clear the floated header in your wrapper div since that's the first element after the header.
Try adding clear: both to your existing #wrapper styles.
This will force the content box for the wrapper div to drop below the header.
Chris Shaw
26,676 PointsHi maayan,
Could you please post the code you're currently using, both your CSS and HTML.
maayan malka
2,454 PointsWawoo thanks for the fast responses guys :)
I'll explain myself better this time: I've downloaded the exercise files of the "how to make a website" course, and played with the CSS. I saw that there's an ID called #gallery, and on the CSS file it was given a margin and padding of 0.
here is a snippet of the HTML showing this ID:
<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/hotdogs.jpg"> <img src="img/hotdogs.jpg" alt="hotdogs illustraton"> <p>Illustration of hotdogs!</p> </a> </li>
and a snippet of the CSS:
gallery {
margin: 0; padding: 0; list-style: none; }
( I'm sorry but I don't know how to upload the code here, so to see the full code you can just go to the end of the course and download the zip files like I did..)
now for my Question:
I understand that the gallery is an ID for an un-ordered list which is inside the section, and inside a div with an ID called "Wrapper".
I don't understand what determines the object boundaries or in other words: how do I know when an object starts and where does it ends?
when I remove in the CSS the "#gallery {margin,padding :0;}" there is a space between the header and the top of the screen. when I used inspect element, I could see that this was because the ul #gallery was stretching up until the top of the screen, even though it's #wrapper div wasn't so this means it is "Bigger" or i donno how to call it.. has a different size? does this makes any sense?
so as a fresh beginner I'm having problems understanding how to tell where an object starts and where it ends..
Thanks a lot for taking the time to read and trying to help me..
Maayan
Jason Anello
Courses Plus Student 94,610 PointsIf you inspect the #wrapper div you should find that it extends all the way to the top of the header as well. The section element does this too. So it's not that the gallery is extending up further than it's parent containers.
The reason that the wrapper div extends to the top is because the header is floated.
As I mentioned in my answer, if you have the wrapper div clear the floated header then it will remove this gap problem. The wrapper div, section, and ul will no longer extend to the top of the header but will instead be forced below the header where you would expect them to be.
For the most part sibling elements will not be overlapping like this. Generally, one element begins where another one ends. Some ways you will have overlapping elements is with floats, negative margins, or positioning.
You will get better at knowing where elements begin and end as you gain more experience.
This thread will help you with how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum
Doug Ray
7,493 PointsHey mayaan
Chris is right its kinda hard to tell without the css as well but if you remove the line that reduces the margin and padding to zero than it will push the elements down to add that margin and padding back giving you white space. As for the gallery object size being bigger than its container this could be to make some room for the items in the acual gallery depending on the margins and padding.
hope this helps
Doug
maayan malka
2,454 Points*here's the snippet of the HTML again: <div id="wrapper"> <section> <ul id="gallery"> <li>
maayan malka
2,454 Points*I don't know why it's not working! I'm trying one more time:
<div id="wrapper"> <section> <ul id="gallery"> <li>
maayan malka
2,454 Points''' <div id="wrapper"> <section> <ul id="gallery"> <li> '''
maayan malka
2,454 PointsI give up :)
maayan malka
2,454 PointsThanks a lot Jason Anello !!!