Welcome to the Treehouse Community
Looking to learn something new?
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
James Barnett39,199 Points
The short answer is:
<a>element is inline, so you need to change it's display to either
inline-blockso 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 Brewer7,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 Brewer7,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.