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

Changing distance of a button to the text obove and below

Hey guys, I'm currently playing with the smells like bakin website. I'd like to change the appearance of the button by making the distance bigger between the text above and below. I thought I could change this by increasing the margin. For some reason this is not working. It works just in case I'm adding display: inline-block. However I don't want to use this piece of code. Does anybody know why the margin is not changing and any ideas how to fix this properly since I'd like to use this code example to style my own buttons on my own website...

There you can search for "btn" in the css to see. http://teamtreehouse.com/library/websites/build-a-simple-website/styling-content/finishing-the-css

5 Answers

James Barnett
James Barnett
39,199 Points

The short answer is:

  • An <a> element is inline, so you need to change it's display to either block or inline-block so you can applying margin to the top & bottom.
  • The margins are collapsing, because that's what margins are supposed to do, set your margins accordingly

This is the first in a series of courses about using CSS, the reasons behind this bevhavior will be covered later in the series.

You can read up on the differences between inline & block-level elements in this blog post.

Aaron Brewer
Aaron Brewer
7,939 Points

Can you show us your code and maybe an example?

If I had to make a best guess, try using padding instead of margin.

The code is available here http://teamtreehouse.com/library/websites/build-a-simple-website/styling-content/finishing-the-css go to "view code playground". with padding you extend the size of the button itself but not the area around it.

The problem is the code isn't written to avoid the 'collapsing margins' issue in the examples.

I was going to mention this, but I figured it would be solved in the CSS lessons for anyone who is going through that as well.

I haven't completed all of those yet, but try adding a clear:both; css style to the button and then trying again?

Aaron Brewer
Aaron Brewer
7,939 Points

You have to add display: inline-block... Mainly because the tag that is styled is the a tag, which is, by browser default, an inline element. Mainly because people usually put it into elements such as li or p tags, it won't break to the next line... But in this case, you need to specify it as an inline-block, so it may "break" to the next line, and from there you will be able to edit the margin.