Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Bob Goldsmith
Bob Goldsmith
5,444 Points

Thanks Jason. Much appreciated.