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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![joeboo2529](https://secure.gravatar.com/avatar/21e0cb643069a7aca016b609277c6e0a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
joeboo2529
9,805 Pointsnegative margin
what do you mean "Usually, around negative 4 pixels, but that also depends on the font size we are using."
5 Answers
![Adrian Melendez](https://uploads.teamtreehouse.com/production/profile-photos/469312/micro_NinjaSil708090back1.png)
Adrian Melendez
5,555 PointsThe negative margin to fix the gaps in a row of inline-block elements is usually 4px but not always 4px because the gaps between the elements are caused by 'Space' characters the browser is rendering between them. Browsers adds those characters because they consider tabs, spaces, and new lines as text to be displayed but will collapse all consecutive tabs, spaces, and new lines into a single 'space' character.
I recommend not using negative margins for various reasons I've posted in another forum discussion.
Here's the solution I came up with:
Instead of adding a negative margin which may or may not render correctly when using different fonts and browsers, the white space in the code between the list elements should be commented out.
<ul><!--
--><li><a href="#">Home</a></li><!--
--><li><a href="#">About</a></li><!--
--><li><a href="#">Work</a></li><!--
--><li><a href="#">Contact</a></li>
</ul>
This way of solving the problem has several benefits over both the negative margin and the single, long line of html solutions:
- The page will render correctly regardless of font sizes or user style sheets.
- The page will render correctly regardless of changes in the way HTML is handled by browsers in the future.
- Organization of the code is kept intact for ease of maintenance.
![Manuel Palma](https://uploads.teamtreehouse.com/production/profile-photos/539452/micro_Foto_del_05-03-14_alle_18.28__3.jpg)
Manuel Palma
6,144 Pointssomething like "margin-top: -4px;"
![joeboo2529](https://secure.gravatar.com/avatar/21e0cb643069a7aca016b609277c6e0a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
joeboo2529
9,805 Pointsthe body were set to "font: normal 1.1em/1.5 sans-serif;" in his case. So how is that become -4px? isn't 1em equal to 16px as standard?
![Manuel Palma](https://uploads.teamtreehouse.com/production/profile-photos/539452/micro_Foto_del_05-03-14_alle_18.28__3.jpg)
Manuel Palma
6,144 Pointsi need to understand the context of this explanation, otherwise i can't help you
![joeboo2529](https://secure.gravatar.com/avatar/21e0cb643069a7aca016b609277c6e0a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
joeboo2529
9,805 PointsWhat's 1.1em/1.5 sans-serif convert to px?