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
Tiffany McAllister
25,806 PointsNegative Margins
The Display Modes code challenge task 4 is asking me to remove the whitespace between columns using negative margins. This is what I have:
.col {
margin-right: -5px;
}
The code preview displays it correctly but I keep getting the error message: "Bummer! The body font size is 16px. Make sure you are giving .col the correct negative margin value".
Not really sure what it is expecting here?
Michael Kauzlarich
4,579 PointsI'm getting the same error and have tried multiple numbers to see if that works. Also, in the HTML, is it an error that the classes are "primary col" and "secondary col"?
Mike Baxter
4,442 PointsMichael Kauzlarich , you can add as many classes as you want to an HTML element, it's part of the beauty of cascading style sheets. I think that part is fine. I'm just thinking the solution might be wrong; if there are a number of us who have tried a bunch of different values, it's kind of suspicious. I even tried setting the margin to -1em so that it would match the font size, but no dice.
Michael Kauzlarich
4,579 PointsI was getting the same error but passed by using:
.col {
margin-right: -4px;
}
If someone could explain the relationship between the amount of pixels of the font size vs the margin that would be really helpful.
Also, in the HTML, is it an error that the classes are "primary col" and "secondary col"?
Tiffany McAllister
25,806 PointsHmm that's very strange. I just tried -4px as well and it passed.
Michael Kauzlarich
4,579 PointsMike Baxter thank you for your reply. So the "primary col" is actually two different class names! (Sorry for the two posts, not sure what happened there.)
Mike Baxter
4,442 PointsGuil Hernandez , is there any chance you can adjust the code challenge to accept more values? It seems that -4px is the only one that completes the challenge; however, it seems that anything less than -2px is enough to rearrange the column, and the video shows -5px, so I think it's going to confuse a lot of people. It would also seem that -1em should be acceptable, but depending on the font it could cause a lot of overlap. Props to Michael Kauzlarich for figuring out the correct size to use. Thanks Guil!
3 Answers
Guil Hernandez
Treehouse TeacherHey everyone,
There isn't a relationship between the font size and the actual right margins. However, the whitespace between the columns is affected by the font-size. So, the larger the font size is in the parent element, the more we'll need to compensate with margins.
For instance, take a look at this pen I created. If you increase the body's font-size, notice how the columns will break.
I used the value -5px so that no whitespace "exists" between the columns –– I wanted them as close together as possible. In this next demo, take a look at the space between the columns when we change the right margin value. It gets wider, doesn't it? This probably wouldn't be an issue if the columns didn't have a background (which is usually the case), but it's worth pointing out. :)
There is another way we can remove the whitespace without having to use a negative right margin. If we wrap our columns in a div, then set its font-size to 0, the whitespace disappears (it's zero'd out). We'll then need to reset the font-size in our columns so that we're able to see the text. Here's another demo I created using this method.
I'll revisit the code challenge and make sure it accepts multiple values. Thanks for the suggestions!
Guil
Mike Baxter
4,442 PointsThanks for the reply Guil!
Tiffany McAllister
25,806 PointsThanks Guil!
Katy JJ
166 PointsThank you Guil , quite helpful
Paul Mather
3,313 PointsNegative margins should never be used to 'fix' something that is wrong in your code, but using negative margins is totally acceptable - just try not to use it in a way that it 'fixes' another issue in your code.
Alan Mattanó
Courses Plus Student 12,188 PointsWhy margin-right and not margin-left?
Alvin Kato
13,572 PointsYou use margin-right to push the element to the left, and you use margin-left to push the element to the right. They work in reverse motion in terms of vocabulary, m-right pushes left, m-left pushes right. Hope this helps.
Mike Baxter
4,442 PointsMike Baxter
4,442 PointsYeah, that's kind of weird and inconsistent with what's told in the video. Maybe the challenge is wrong? Negative margins seems like a messy way to deal with these things anyway.