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
Kate Massie
Front End Web Development Techdegree Student 7,062 PointsExtra margin space
I'm making a rectangular white navigation link (like a button) on a gray background. The background should surround the link, but instead the bottom margin is also white. The white margin extends past the bottom of the button to either side of the page (this is a mobile layout). If I alter the margin, the white space changes accordingly. But I can't just delete the margin; I need space where the background shows around the button. Does anyone have any ideas? Thanks in advance!
5 Answers
Niilo Smeds
12,540 PointsYou can post your code by copying and pasting it as shown in the Markdown Cheatsheet link below:
Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.
```html
<p>This is code!</p>
```
Bryce Santos
11,157 PointsWould you be able to screenshot the problem and your code?
Kate Massie
Front End Web Development Techdegree Student 7,062 PointsI feel stupid, but I can't figure out how to do this. I have the screenshot, just can't tell how to post.
Bryce Santos
11,157 PointsYou have to upload it to somewhere like imgur and post the link.
Kate Massie
Front End Web Development Techdegree Student 7,062 PointsOk, here is the problem: http://imgur.com/WFYFrr0. It's appearing at the bottom of the Contact button. It doesn't change location if I switch around the order of the links; it always appears on the lowest one. This is the HTML: http://imgur.com/WhlI4OU, and this is the immediately relevant CSS:http://imgur.com/YBYh1Cv. Thank you so much for looking at it!
Kate Massie
Front End Web Development Techdegree Student 7,062 Points#header a:last-child {
margin-bottom: 0;
}
Adding the above to the CSS fixed the problem. (Someone on Slack suggested I try it.) But I don't understand why the margin was behaving that way, and I'd like to.
Bryce Santos
11,157 PointsI have an idea. I think it has to do with collapsing margins. Referencing this: https://teamtreehouse.com/library/css-layout-basics/getting-started-with-css-layout/why-vertical-margins-collapse
Therefore by setting the margin-bottom to 0, it corrected itself.
Kate Massie
Front End Web Development Techdegree Student 7,062 PointsThat's a good idea. Thank you for your help!!
Kate Massie
Front End Web Development Techdegree Student 7,062 PointsKate Massie
Front End Web Development Techdegree Student 7,062 PointsThanks, that's handy to know!!