negative margin

The 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:

1. The page will render correctly regardless of font sizes or user style sheets.
2. The page will render correctly regardless of changes in the way HTML is handled by browsers in the future.
3. Organization of the code is kept intact for ease of maintenance.

Code Pen Demo of Comment Solution

something like "margin-top: -4px;"

the 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?

i need to understand the context of this explanation, otherwise i can't help you

What's 1.1em/1.5 sans-serif convert to px?