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
Daniel Maia
2,559 PointsEmpty space between the parent and the child element. Why?
Ok, so what happened? I am making a school project. I don't know the name of what it actually is (I guess a virtual machine drum, Idk), and I was going to have a div that would contain a flexbox with the buttons that would be clickable, and when clicking a button, a sound/music would be played.
Ok. That's not the point. But when I made the div, there was an empty space between the top of the parent element (the body) and the div itself, and that's because there is no margin, no top, and no padding in the HTML (body parent) and in the body. I made sure to remove them. Now... Why is there still this empty space?
Link for the project on codepen: http://codepen.io/bakedCookie/pen/LErMzO
Yeah, it's a debugging work. I'm very, very thankful for anyone in disposition to help me.
Some guys got the problem solved. Thank you :) Yet, I don't understand why it worked.
3 Answers
Jonathan Grieve
Treehouse Moderator 91,254 PointsHello Daniel.
When I put the website through Chrome DevTools, it looks like the problem is with your *ul.soundboardLayout which in laymens terms is a unordered list with the class of layout.
Try a margin property which the greatest control of your margin values.
Remember you can specify margins with values on each side of an element.
margin: top; right;bottom; left
Hope this helps. :-)
Juan Trujillo
9,391 PointsYou currently have a top and bottom margin of 10% for your unordered list.
ul.soundboard-layout{
margin: 10% 10%;
If your goal is to simply eliminate the space on top, change your margin for your ordered list as Jonathan suggested. One way to do this would be to change your margin to:
ul.soundboard-layout {
margin: 0 10% 10%;
This sets the top margin to 0, left and right margin to 10%, and bottom margin to 10%
Daniel Maia
2,559 PointsYeah, makes sense. I did what Jonathan suggested me, and, yeah, he was right. I just expected some margin on top of the element itself, within the div, not on top of it. The property was supposed to affect only the li.soundButton, not it's parent. Yet, thank you :)
rydavim
18,814 PointsYou might be running into margin collapsing?
There's an awful lot of explicit positioning going on, might there be a better way to achieve the effect you're looking for? If you just want a quick and dirty way to get rid of the whitespace, you can add a border to your div. Not an ideal solution though.
Daniel Maia
2,559 PointsBy the terms, it seems quite it. I'll give it a look and try out your tip. Thank you :)
Daniel Maia
2,559 PointsDaniel Maia
2,559 PointsYeah, it worked! Thank you a lot.
But I cannot just assume "Oh, it's working, great, let's move on". Why does the margin of the child element affects the parent element's margin? The margin was supposed to be applied inside the div, just like a padding, however, dependent on the li.soundButton, not on the ul.soundboard-layout.
Yet , thank you a lot :)
Jonathan Grieve
Treehouse Moderator 91,254 PointsJonathan Grieve
Treehouse Moderator 91,254 PointsIt's because child elements often take on the styles of their parents, and have to be reset with their own styles. This is known as inheritance.
If you use Google Chrome, you can use the DevTools using Ctrl+Shift+J on Windows and try and catch these for yourself as they happen. But this is why you keep seeing these gaps because unless you know how to remove them, elements will invariably have their own default margin and padding values. :-)
Daniel Maia
2,559 PointsDaniel Maia
2,559 PointsYeah, Jonathan. Makes sense. I would understand that if the div was the button's child, however, it's the opposite, so it seems like the parent inherited a child's property. It is so WTH? for me.
Jonathan Grieve
Treehouse Moderator 91,254 PointsJonathan Grieve
Treehouse Moderator 91,254 PointsJust know that even the div is the child of another element. It should at the very least be a child of body which is itself a child of html, which is the root element of any document. :-)
Daniel Maia
2,559 PointsDaniel Maia
2,559 PointsMakes sense... Yet, idk why this would cause this error if there is no margin applied to body nor html.