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 Column Layout with Inline-Block

margin-right:-5px;

Hello!

When we display columns to inline-block, the second column moves to the next line, so to fix it, Guil gives it a margin-right:-5px.

1)But how do we compute the number (-5px)? Why not give it a margin-right:-10px?

2) Why is the value negative?

Thanks

7 Answers

Hello Guys,

Thank you for the help!

Geoffrey, thank you for the thorough response. If you watch the video, around 1:33 minutes into it, Guil mentions why the secondary-columns collapses and he says that the number -5px depends on the font used, so that is the reason I believe there could be a computation behind this number. Please have a look at this video, and perhaps run the code. I am quite sure there is a way to come up with this number, I just don't know how to do it, even if we change the width size of the columns.

https://teamtreehouse.com/library/css-layout-techniques/display-modes/column-layout-with-inlineblock

Pavle Lucic
Pavle Lucic
10,801 Points

Yes he mentioned that. But why he didnt used relative units. He just converted to px, and give negative margin -5px?

HI,

There is no special computing involved -> try and see.

Giving a negative value -> moves the margin in the opposite way that it normally does.

  • Positive would move the content next to the element 5px to the right.
  • Negative moves the content 5px to the left.
Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points

Well I don't think there is really a way to compute the white space value. It is just around 4 5 pixels.

Negative margins is a technique that you can use to push an element in a certain direction. negative margin

So when you apply

margin-right: -5px;

the element is pushed 5px to the left

You can read about the white space on inline elemenets here. The article also show some other ways to handle the problem.

geoffrey
geoffrey
28,736 Points

He does it because there is a white space issue when using the display property with inline-block as value. In fact to give you a quick example, if you have two div next to each other, displayed with this property, if there are whitespaces between both, that's going to be "interpreted". The result will be a gap between both div and you don't probably want it, there are several ways to fix and the negative margin is one of them.

Check this pen I created, I put some little information to help you.

This article is also very valuable, it gives all the details.

Edit: Also keep in mind there are some others existing layout technics, such as float, but this one comes with its quirks as well, there is as well flexbox which is a "flexible layout module" created to get rid of these quirks when creating layouts. Unfortunately some browsers such as IE9 don't support them at all. For more info about compatibily, check caniuse

Pavle Lucic
Pavle Lucic
10,801 Points

I found solution with floating primary and secondary content, without using negative margine.

.col {
 float:left;
}

.secondary-content {
 clear:right;
}

This is the simplest example.

geoffrey
geoffrey
28,736 Points

Yes, It's infact up to you, use the technic you think the most suitable for each situation. As said in my previous post, there are several layouts technics, they all have advanges and disadvantages.

Lidija Novakovic
Lidija Novakovic
6,634 Points

Sorry to high-jack this post but -5px will brake layout if users have different fontsize in browser. How can we compute to make -5px in lets say in percentage or ems?

I have read somewhere that we can set parent to font-size : 0 and then select font-size for the inline elements for example to 16px, then the space gap will be fixed with inline block. Any smart way of making it relative to fontsize just as Pavle Lucic mentioned?

geoffrey
geoffrey
28,736 Points

Hi Lidjia, I'm not sure we can accomplish this using percentages or ems value that are negatives. I've already tried but that doesn't work. In fact If I use percentages instead of pixels, according the value set in percentages for the negative margin, the layout will break when resizing the viewport's width. Why !? I honestly don't know, I've "googled" about that, but have found nothing, everyone uses pixels value to make it working. Maybe It's because the gap to fill is 5px wide, no matter the viewport's width !? Seems to be logical, but I'm not sure that's it.

Here is the test I did: http://codepen.io/anon/pen/JdXpEe

I would like to be sure of that, I'm going to ask Guil Hernandez as many people have questions related to this.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi geoffrey,

Check out this related thread on using negative margins with inline-block.

juraj chmelicek
juraj chmelicek
28,772 Points

In my opinion this layout with inline-blocks and negative margin should not be used. if you zoom in or out in your browser, the content breaks on certain zoom levels... it's got something to do with the way the browsers calculate pixels on those zoom levels...