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 Peter Mayer
Peter Mayer
3,034 Points

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

Peter Mayer
Peter Mayer
3,034 Points
Peter Mayer
Peter Mayer
3,034 Points

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.

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

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