Default 4px spacing between inline elements
Published: 2017-10-21 22:38:53

---
title: Default 4px spacing between inline elements
published: true
description: How to tackle the problem of 4px spacing between inline elements
tags: 
---

<h2>Problem stating</h2>
<p>If you try to create a navigation element ('nav') with menu created via not ordered list items, you will find yourself facing a problem of approximately 4px spacing between 'li' elements.</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/bs6pl6f502nsdna4nls3.JPG" alt="screen of default 4px spacing between inline elements" />

<p>It's not a margin. HTML code looks like this:</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/m52phv8ecxncx5ns2xg2.JPG" alt="screen of html code snippet with 'ul' and 'li' items" />

<h2>Cause</h2>
<p>Let me start by saying that the cause of this issue lies in html markup. Every time when we insert new 'li' element on a separate line in code editor, we are inserting a line break at the end of previous 'li' element. This line break is interpreted as a white-space by our agent (browser). The default behavior of the browser to render a white-space - is to generate space of 4px. Actually, it's not 4px exactly. It depends on font-family (serif, sans-serif), font-size and scale.
 But these are minor issues and could be omitted. We'll assume, that this spacing is always 4px. Which is true in most cases.</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/anm5dpyo71r6b1oo5gqv.JPG" alt="screen of html code showing li elements" />

<h2>Solutions</h2>
<p>There are several ways to avoid annoying 4px spacing. Each one has its cons and pros. It's up to you to decide, which one to use. They can be grouped by 'HTML' and 'CSS' methods.</p>

<p>All the below will produce the same result like:</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/qrzg3ne4zu3nt7kaosee.JPG" alt="webpage without spacing between li elements." />

<p>All the below will have basically the same pro/con:</p>
<p><strong>Pro</strong>: No hassle with css.</p>
<p><strong>Con</strong>: Not regular html markup, which is usually hard to read.</p>

<h3>1) [HTML method] Write all li elements in one line without line breaks</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/ldfbl7c8ww4vk9rql6fg.JPG" alt="html code with li elements on one line" />


<h3>2) [HTML method] No line breaks between closing and opening 'li' tags. The rest of code can sit on separate lines.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/p29il21itg1e1m0wt0tl.JPG" alt="html code with open and close li tags on one line" />

<h3>3) [HTML method] Insert html comment instead of line breaks.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/g1uun9rvklns4huybi2p.JPG" alt="html code with comments" />

<h3>4) [HTML method] Break closing 'li' tag btween lines.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/f63gzd5sfbvh1t088qni.JPG" alt="html code with split tag" />

<h3>5) [HTML method] Skip closing 'li' tag, its HTML5 valid.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/ddmm6y8pf20v2wqvkp30.JPG" alt="html code with split tag" />

<h3>6) [CSS method] Assign negative margin for contents of 'li' elements.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/vicl3n6pkeuf84bjtp7k.JPG" alt="css code with margin -4px" />

<p>Though, in my case, 4px were not enough to kill the spacing. See a screen:</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/mkmzod3nntum30lkngo8.JPG" alt="spacing between inline elements still exist" />

<p>So I should set margin-right for -5px.</p>

<h3>7) [CSS method] Set font-size to zero for parent element and set correct font-size for 'li' elements.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/srqidgl7qnqjfc968lb1.JPG" alt="css code with font-szie prperty" />

<p>Though, in this case, you can't use 'em' or '%' font-size for child elements.
 All children of this parent will have font-size zero, so only 'rem' or 'px' font-sizes can be used.</p>

<h3>8) [CSS method] Set float 'left' for 'li' elements.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/spy2upr8d1f1vf2o7rqu.JPG" alt="css code with float prperty" />

<p>But in this case, extra positioning is needed.</p>

<h3>9) [CSS method] Set letter-spacing to '-1em' for parent and to 'normal' for 'li' elements.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/c7z9jcriwnkq4axz8ljp.JPG" alt="css code with letter-spacing prperty" />

<h3>10) [CSS method] Display as 'table' for parent and as 'table-cell' for 'li' elements.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/zwpg0uu6jdqezav9v0s5.JPG" alt="css code with display table prperty" />

<h3>11) [CSS method] Display as 'flex' for parent.</h3>

<img src="https://thepracticaldev.s3.amazonaws.com/i/w348chz9soni3wk0fzsz.JPG" alt="css code with display flex" />

<p>Thank you, <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/" target=""_blank>Cris Coyier post</a> and <a href="https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items" target="_blank">Kyle stackoverflow answer</a>, I got my inspiration from your knowledge.</p>