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

Fung How Lim
Fung How Lim
2,402 Points
Posted by Fung How Lim
Fung How Lim
2,402 Points

Why is it important to set margin-right to -4px?

Since padding-left and right are both set at 1em, why should we set margin-right at -4px?

I don't quite understand what this -4px does.. Would be perfect if you could help with this. Thanks!

Best, S.

2 Answers

Joey Bruijns
.a{fill-rule:evenodd;}techdegree seal-36
Joey Bruijns
Full Stack JavaScript Techdegree Graduate 47,878 Points

Hi,

I think it’s because in the video the .col class is set to inline-block. This display value creates some undesirable extra white-space between the columns, making them break the layout. The negative margin is one way to fix that problem and make sure your layout behaves like you intended.

Here’s some extra explanation

Fung How Lim
Fung How Lim
2,402 Points
Fung How Lim
Fung How Lim
2,402 Points

thanks for the additional info! :) cheers!

Martin Chaffee
seal-mask
.a{fill-rule:evenodd;}techdegree
Martin Chaffee
Front End Web Development Techdegree Student 15,278 Points
Martin Chaffee
.a{fill-rule:evenodd;}techdegree
Martin Chaffee
Front End Web Development Techdegree Student 15,278 Points

Actually, it's the padding that removes the "undesirable white-space between the columns". The -4px right margin allows the columns to appear beside each other in the first place; without the negative margin, each column is too wide to sit side-by-side, and the second column is pushed below the first.