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 CSS Layout Techniques Display Modes Inline-Block Formatting

Lidija Novakovic
Lidija Novakovic
6,634 Points
Posted by Lidija Novakovic
Lidija Novakovic
6,634 Points

Think 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
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

Something 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

Lidija Novakovic
Lidija Novakovic
6,634 Points
Lidija Novakovic
Lidija Novakovic
6,634 Points

Correct 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
Lidija Novakovic
6,634 Points
Lidija Novakovic
Lidija Novakovic
6,634 Points

Take a look at this -

<head>
<title> Bloody inline</title>
<style type="text/css">
.box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 20px;
        display: inline-block;
        vertical-align: top;
    }
    .box2 {
        margin-top: -400px;
        display: inline-block;
        background-color: green;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
<div class="box">
        <div class="box1">

        </div>

        <div class="box1">

        </div>

        <div class="box2">

        </div>

    </div>
</body>
</html>

Why does this work? Anyone?

Jasen Carroll
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

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