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 trialorange sky
Front End Web Development Techdegree Student 4,945 Pointsmargin-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
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello 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
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsHI,
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
2,810 PointsWell 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.
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
28,736 PointsHe 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
10,801 PointsI 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
28,736 PointsYes, 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
6,634 PointsSorry 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
28,736 PointsHi 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
Treehouse TeacherHi geoffrey,
Check out this related thread on using negative margins with inline-block
.
juraj chmelicek
28,772 PointsIn 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...
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsYes he mentioned that. But why he didnt used relative units. He just converted to px, and give negative margin -5px?