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 CSS Layout Techniques Display Modes Column Layout with Inline-Block

Bob Goldsmith
Bob Goldsmith
5,444 Points

Can anyone explain the white space issue further?

In the Column Layout with Inline-Block video, the columns only sit side by side when margin-right: 5px; is applied to them in the CSS. I understand that the initial problem is due to white space in the HTML being interpreted by the browser, but why is it 5px exactly and how does that relate to font size?

If I increased or decreased the body font size, how would I calculate the new margin-right value?

3 Answers

I think it's a trial and error type thing. The gap that appears between the elements is a single space. So the number of pixels you use has to match the width of a single space. That width would be dependent upon the font you used and the font size. For example, the space on a monospaced font would probably be wider than a space with say, Times New Roman.

Here's some other ways to deal with it:

Bob Goldsmith
Bob Goldsmith
5,444 Points

Thanks Jason. Much appreciated.