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!
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
Justin Iezzi
Courses Plus Student 18,014 PointsQuestion about margin usage in Writing CSS video.
He uses the margin property here at 40px top and bottom, but it doesn't seem to do anything on his screen, or mine even. I played with this number and the button does not budge, nor anything around it. Playing with the side margin shows actual change, but the top and bottom do not.
Does he do this for a specific reason? Are there any benefits to adding that margin there? And why is it not changing anything visually?
2 Answers
James Barnett
39,199 PointsThis is actually a known issue with the Smells Like Bakin' project.
The "button" you are trying to style is an <a> which is an inline element. So any vertical margin (and padding for that matter) assigned will not applied.
But it's a simple fixed just add
.btn { display: inline-block; }
You can read more about display: inline-block on learnlayout.com
Justin Iezzi
Courses Plus Student 18,014 PointsVery informative, thanks so much! Perhaps I should have searched for that post a bit more. I assume I should only use inline-block when I need margin or padding vertically. From what I understand it isn't a complete replacement of the inline element.
James Barnett
39,199 Points- block elements: Display on their own line, they have both vertical & horizontal padding/margin
- inline elements: Display on the same line, they can only have horizontal padding/margin
- inline block elements: Same as inline, they can also have vertical padding/margin
Justin Iezzi
Courses Plus Student 18,014 PointsPerfect. Appreciated.