Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.