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
Manuel Meewezen
8,627 Points-5px margin for the 2 divs
I just don't understand why the -5px margin is necessary to place the two divs next to each other. Shouldn't the box-sizing have take care of that? Could someone explain please? Thanks :)
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Manuel,
The box-sizing property is what allows you to set the 2 widths on the columns to 60% and 40% and not have to worry about taking into account the 20px of padding each one has.
Since they're inline-block elements you still have to contend with the whitespace issue in the html. The whitespace that exists between the two div's in the html produces a single space between the 2 div's on the rendered page. Much like the gaps between the navigation elements.
A negative 5px margin is then needed to close that gap up.
Manuel Meewezen
8,627 PointsTY so much for your reply Jason :)
Sunatullo Sattorov
1,326 Pointswhy -5px ? can we use any other
Jason Anello
Courses Plus Student 94,610 PointsHi Sunatullo,
The pixel number that you use corresponds to the width of a space. The gap that appears between elements is equal to the width of a single space which is dependent upon the font-family and font-size you have chosen.
So the exact pixel number you use would correspond to whatever the width a 'space' takes up.