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

Posted by bikusta
bikusta
4,261 Points

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...

Kyle Gusek
Kyle Gusek
Courses Plus Student 550 Points

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

1 Answer

wuworkshop
wuworkshop
3,429 Points

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.