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 Pavel Palancica
Pavel Palancica
6,535 Points

"margin" attribute applied to a link does not have any effect

Hey guys

I am watching this video about CSS Styling: http://teamtreehouse.com/library/websites/build-a-simple-website/styling-content/writing-css

At 7:20, Nick adds this line: "margin: 40px 0px;". However I can't see any difference in my browser after applying it, even if I replace 40px with 200px.

Is there a browser's problem (strange behaviour), or I am missing something here?

Please help me ;)

Thanks in advance

1 Answer

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

You're right! There isn't any change.

Short Answer:

I believe, that's because Nick didn't add the display: inline-block property to the CSS for the .btn class.

Long Answer:

To understand why this is happening you need to know that an <a> element is inline, so in order to change it's display to either block or inline-block so you can applying margin to the top & bottom.

The differences between inline & block-level elements will be dicussed in the videos on CSS positioning later in the course sequence.

If you are curious about it now, you can read up on the differences between inline & block-level elements in this blog post.