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
Curtis Fletcher
1,736 PointsProblem understanding margin
Im working on the "how to make a website" course and theres a section where the teacher suggests we use padding to add space above the footer.
My questions is:
Why does it have to be padding (and not margin)?
And:
Why does margin seem to do nothing. Here is the code (ive tried to isolate the part Im working on as much as possible):
https://jsfiddle.net/a1yyrwv4/
... the part:
footer { padding-top: 50px; }
is the part I dont get.
If you change it to margin theres no gap at all. Even if you set the margin-top to 500 px theres no gap. What exactly does margin do and why isnt it making any gap in this situation?
1 Answer
Felix Yakubov
17,475 PointsOk, so the basic box model is:
Margin
-------- border
Padding
Content
Padding
------- border
Margin
margin is the space between the element and other elements. padding is the space between the content/element and its border or the container border. The decision of using margin or padding should be based mostly on two things: Positioning of the element relating to other elements Display type of the element Paragraph and are block elements so anything inside it can be spaced using padding But if you want to space between two divs, use margin
Hope it helped a bit