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 Philippe Parmentier
Philippe Parmentier
9,517 Points

.btn margin 40px 0px; not working @webdesign/writing css course video

http://teamtreehouse.com/library/build-a-simple-website/styling-content/writing-css-2

<p><a href="#" class="btn">Browse Our Cupcakes</a></p>

.btn {
    color:#faf3bc;
    background: #4fb69f url('img/texture.png') no-repeat right top;
    padding:15px 30px;
    margin: 40px 0px;
}

I have looked on my html/css and on the wesbite <a href="http://www.smellslikebakin.com/">smellslikebakin</a> with inspect element. (http://www.smellslikebakin.com/) when I change the value 40px, it doesn't change at all.

is this something to do with block element with margin top bottom not working? thanks for your help

we can put margin on the parent p of the .btn, it is working.

2 Answers

Philippe Parmentier
Philippe Parmentier
9,517 Points

ah thank you so much Victor!

Victor Gil Borrego
Victor Gil Borrego
13,435 Points
Victor Gil Borrego
Victor Gil Borrego
13,435 Points

The reason is that your a tag is not treated like a block, so it wouldn't take the margins. If you want your a tag be treated like a block use :

display:block;

or 

display: inline-block;