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 trialLidija Novakovic
6,634 PointsThink CSS Layout is the most hard to learn and understand =( Why can't I use a negative margin on inline-blocks?
Trying to figure out why I cant use negative margin on inline -blocks. For example I am trying to move main-nav (ul) higher up but I cant. Why?
2 Answers
Jasen Carroll
9,958 PointsSomething with an "inline-block" display value will still display inline, which won't work with negative margins because the line it sits on will still have the same margin overall. And I am assuming you want your nav to be horizontal, so you wouldn't necessarily want to change the display type.
You could try positioning the nav list relatively with the following (also assuming your main-nav is a class):
.main-nav ul { position: relative; top:-2px; }
And change the value of "top" to be whatever works for you
Jasen Carroll
9,958 PointsThe negative margins are working again in this case because setting the vertical-align to top for an inline-block item would be equivalent to setting position-top to 0 for a block item.
Let me know if that doesn't make sense and I can try to explain it better.
Lidija Novakovic
6,634 PointsLidija Novakovic
6,634 PointsCorrect me if I am wrong but from listening to Guil he stated that when using inline-block margin can be applied - positiv margin does work correct? Negative margin does not - however what I have found out is when using vertical-align on any element negative margins does work - why?
Lidija Novakovic
6,634 PointsLidija Novakovic
6,634 PointsTake a look at this -
Why does this work? Anyone?