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
Colin Narver
1,365 PointsStyling Content CSS issue
I'm having two small issues.
I can't seem to adjust padding on my button for "browse our cupcakes". Regardless of what I put in for the first value of margin (changing its north/south positioning) nothing happens.
.btn {
color: #FAF3BC;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 15px 30px;
margin: 40px 0px;
border-radius: 25px;
text-transform: uppercase;
}
Also, when I link to img/texture.png, the texture is not evident on the button. I am checking my work in google Chrome and keep saving and refreshing to no avail.
Any help would be much appreciated!
Colin
3 Answers
James Barnett
39,199 PointsTL;DR - Add display: inline-block then will be able to add top & bottom margins to the "browse our cupcakes" button.
You can only apply a top & bottom margin to block-level elements.
The "browse our cupcakes" button, use the <a> tag and is a inline element, to change this behavior set that element to be displayed as either inline-block or block.
You can read up on the differences between inline & block-level elements in this blog post.
Side Note: The Build a Simple Website course, is the first in a series of courses on using CSS, the reasons behind this behavior will be covered in the next course.
Nikolaos Papathanassopoulos
10,322 PointsTry to use this:
.btn {
margin-top: 40px;
margin-bottom: 40px;
margin-left: 0px;
margin-right: 0px;
}
instead of this:
.btn {
margin: 40px 0px;
}
if it still doesnt work, something is wrong with your markup.
~Nikos.
Colin Narver
1,365 PointsYes, thank you James!! Problem solved.