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!

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 Build a Simple Website Styling Content Writing CSS

Adding margin to ".btn"-class doesn't show any effect

At around 7:30 in the video, the "margin"-property is added to the ".btn"-class. When refreshing the page, there is no visual change at all.

My solution was to add the declaration "display: inline-block;" to the ".btn"-class. From my understanding, anchor elements are inline elements and don't support margins by default.

Please correct me if I'm wrong...

I was a bit confused when he refreshed the page and nothing happened! Your solution works for me.

1 Answer

Haven't watched the video that you're referring to, but just to clarify margins and inline elements (which, yes, the anchor element is an inline element per the W3 specs).

I'm just going to quote this helpful site from Shay Howe:

Inline-level elements are affected a bit differently than block and inline-block elements when it comes to margins and padding. Margins only work horizontally—left and right—on inline-level elements. Padding works on all four sides of inline-level elements; however, the vertical padding—the top and bottom—may bleed into the lines above and below an element.

Margins and padding work like normal for block and inline-block elements.