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

CSS

Posted by sam devos
sam devos
3,644 Points

Margin'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
Thomas MacFarlane
2,430 Points

I'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
sam devos
3,644 Points

ok thanks !

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Nick shouldn't have ever applied a top and bottom margin to the .btn class, as the class is used on an anchor tag

That'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 attribute

I'm not sure I quite understand what you are suggesting here, but it sounds like a bad idea.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Probably. Listen to the moderator, not the newbie lol. Least I was half-right :P

sam devos
sam devos
3,644 Points

ok that did work :) thanks James

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Thomas 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
Thomas MacFarlane
2,430 Points

Haha of course it was a test, Nick ;)