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
Rafael Mocelin
Courses Plus Student 3,271 PointsMargin to separate button from text not responding
Just this one detail and I finish my first project!
Anyway, I have the Smells Like Bakin' site up exactly like the example but my first button "Browse Our Cupcakes" does not seem to respond to my margin configurations.
Here is the coding relating to the section mentioned above:
HTML
<div id="intro" class="grid_9">
<h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
<p><a href="a" class="btn">Browse Our Cupcakes</a></p>
</div>
CSS
.btn {
color: #FAF3BC;
background: #4FB69F url('c:/Users/Rafael/Desktop/img/texture.png') no-repeat right top;
padding: 15px 30px;
margin: 40px 0px;
border-radius: 25px;
text-transform: uppercase;
}
Can somebody help me figure out what I am doing wrong? I can change the margin to 200px and nothing happens.
Thanks in advanced.
2 Answers
James Barnett
39,199 PointsRafael Mocelin - The behavior you are seeing is because you are trying to style a <a> which is an inline element by default as such it doesn't apply top & bottom margin/padding.
However there's a simple solution for your button add display: inline-block to .btn and you are all set.
Inline-block allows you to apply margin/padding to the top and bottom of an element but doesn't have the element take up the full width of the container like block does.
I made a quick demo on codepen to show you how that works.
Here are 2 resources where you can learn more about inline-block:
Sean T. Unwin
28,690 PointsAdding position: absolute; to .btn should have the margin display correctly.
Rafael Mocelin
Courses Plus Student 3,271 PointsThank you so much! It worked.
James Barnett
39,199 PointsSean T. Unwin - I think the use of position: absolute here is a sub-optimal solution. I always think of absolute positioning corrupts absolutely when thinking about normal document flow.
Rafael Mocelin
Courses Plus Student 3,271 PointsHi James,
What would you recommend instead?
James Barnett
39,199 Points- Short Answer:
display: inline-block - Long Answer: See my answer below
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsYou are correct James Barnett. I feel bad for not suggesting that instead, but had a momentary lapse of reason, as that is what I was trying to think of while eating lunch when I posted. I knew there was a more appropriate way yet I gave an option that would work. I wanted to help although, I suppose in retrospect, my head wasn't fully into it so thanks, sincerely, for your comments.
Rafael Mocelin
Courses Plus Student 3,271 PointsRafael Mocelin
Courses Plus Student 3,271 PointsWow, thanks. The video tutorial available here did not mention any of this, yet it seemed to work for him. Do you know of any particular reason why?