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
Zach Saul
11,156 PointsI don't really understand why setting .col's margin to a negative value allows them to sit side by side.
in this case .col is the shared class of the column's were attempting to style using the inline block method. In the video he says that when they don't appear side by side when assigning them width,
(in this example he sets each of the columns to 40%, and 60% respectively)
then the way to combat this issue is to set the margin of the shared class (.col in this case) to a negative value based on the font size.
my question(s) are 1. how is one to know what value to choose (he chooses -5px), and why does this solve the issue, where is that space overflowing/overlapping from?
5 Answers
Andrew Stelmach
12,583 PointsActually it's not MARGIN the negative margin is compensating for; it's white-space created by the html markup.
The whitespace is created by the browser counting line breaks and tab space in the HTML as whitespace.
Solution:
- Place the items right next to each other in the HTML,
- (Better) use negative margin (usually around 4px, but it also depends on the font size you're using).
For that reason I like to find the correct negative margin needed using pixel values, but then convert that to ems and use an em value for the negative margin, eg 5/16 = 0.3125em.
Abdullah Althobetey
18,216 PointsBecause inline and inline-block elements puts a little left and right margin by default. So he put negative margin between those elements so he can "undo" the default margin. The default margin size between inline elements depends on font size, you can come up with the number by trial and error until the columns stick with each other. Also if the font size is 0 in an inline or inline-block element, it will not have any margin, so if your columns does not contain text, setting the font size to 0 will solve the problem and you can reset the font size in child elements to a proper size (but this trick is not recommended because of the weird behaviour on some mobile browser). Hope this help
Zach Saul
11,156 Pointsinteresting: why is it that inline block elements add left margin by default? what purpose does that serve?
Abdullah Althobetey
18,216 Pointsinline elements like text need space between them, so it is as Andrew said because the white-space in the markup
Jon Benson
12,168 PointsTo the best of my knowledge:
- He has played around with values, and knows by experience that -5 px works well in the situation. Try messing with those values to see how the site changes
- The margin is part of the "box" model that will easily allow for this negative adjustment, and really adjust much of the white space. Again, I have to keep playing to get an idea on how this behavior looks.
Not a great definitive answer, but I had/have my "issues" with margins and bordersstoo, but experience gained just messing around has helped. The W3C website has a better technical answer. Good Luck!
anotherdude
7,053 PointsThis discussion on inline-block and negative-margins may hold some answers to your questions: https://teamtreehouse.com/forum/negative-margins
Michal Janek
Front End Web Development Techdegree Graduate 30,654 PointsHowever I do not understand how changing the height in media query made the columns stack on each other, i mean firstly he changed margins to have them next to each other and then height to revert the process???