Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Margin 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
James Barnett
39,199 Points

Rafael 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
Sean T. Unwin
28,660 Points

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

Wow, 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?

Sean T. Unwin
Sean T. Unwin
28,660 Points

Adding position: absolute; to .btn should have the margin display correctly.

Thank you so much! It worked.

James Barnett
James Barnett
39,199 Points

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

Hi James,

What would you recommend instead?

James Barnett
James Barnett
39,199 Points

Rafael Mocelin -

  • Short Answer: display: inline-block
  • Long Answer: See my answer below