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
sam devos
3,644 PointsMargin's don't work (Simple website course )
To be more specific : Build a Simple Website >Styling Content >Writing CSS in this chapter you have the following code :
.btn{ color:#FAF3BC; background:#4FB69F url('img/texture.png') no-repeat right top; padding:15px 30px; margin: 40px 0px; border-radius:25px; text-transform:uppercase; }
if you change the margin like : margin 80px 0px; it doesn't work the left and right margin's do work .
I don't understand why the button does't move lower or higher.
i tried margin-top:80px; with no results.
1 Answer
Thomas MacFarlane
2,430 PointsI'm actually calling Nick Pettit to this thread for this.
Vertical margin and padding only works on block level elements, it won't make any difference at all when applied to an anchor element. In the video, Nick shouldn't have ever applied a top and bottom margin to the .btn class, as the class is used on an anchor tag.
Well done for spotting that! You can use horizontal margins for inline elements, but not vertical margins. You would need to adjust the surrounding div for that, or turn the anchor elements into block elements if you were really intent on doing it that way, but a better method if you had multiple vertically spaced links that you wanted to space precisely is to use breaks and alter the line-height attribute
sam devos
3,644 Pointssam devos
3,644 Pointsok thanks !
James Barnett
39,199 PointsJames Barnett
39,199 PointsThat's true.
However, it's a really easy fix. Use
display: inline-block>better method if you had multiple vertically spaced links that you wanted to space precisely is to use breaks and alter the line-height attributeI'm not sure I quite understand what you are suggesting here, but it sounds like a bad idea.
Thomas MacFarlane
2,430 PointsThomas MacFarlane
2,430 PointsProbably. Listen to the moderator, not the newbie lol. Least I was half-right :P
sam devos
3,644 Pointssam devos
3,644 Pointsok that did work :) thanks James
Nick Pettit
Treehouse TeacherNick Pettit
Treehouse TeacherThomas MacFarlane and James Barnett are correct. Well spotted, guys!
This was totally a test to see whether or not you're paying attention... At least I'm going to pretend that's the case. ;)
Actually, it was probably some vestige of an earlier iteration on the site that never got removed. That happens a lot in projects where there's lots of changing CSS and other code. It's easy to forget to remove stuff you don't need anymore.
Thomas MacFarlane
2,430 PointsThomas MacFarlane
2,430 PointsHaha of course it was a test, Nick ;)