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 drewbumpas
drewbumpas
5,529 Points

Adding margin to button doesn't affect layout?

On the build a simple website track, stage 4, writing CSS, when I add 40px of top and bottom margin to the btn class, nothing is changing. It looks correct, but I don't understand why we added it if no change happens, that I can see.

I experimented and added 100px of top and bottom margin to see what would happen and there was still no visual change in the website. Why is this?

2 Answers

James Barnett
James Barnett
39,199 Points

This is a known issue with the Smells Like Bakin' project.

The "button" you are trying to style is an <a> which is an inline element. So any vertical margin (and padding for that matter) assigned will not applied.

But it's a simple fixed just add

.btn { display: inline-block; }

Then your vertical margin will be applied.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Sometimes changing the position attribute affects elements in different ways. You might try adding position: relative or position: absolute to the btn class and see how the layout is affected.