inline and inline-block difference in "responsive web design with html5 and css3"

I came across this question when reading "Responsive Web Design with HTML5 and CSS3" Chapter3 Fluid Layouts. The author was trying to change fixed pixel size to percent-based fluid size. Below is html and css code.

html:

<div id="wrapper">
<div id="navigation">
  <ul>
    <li><a href="#">something</a></li>
    <li><a href="#">some other thing</a></li>
  </ul>
</div>

css:

#navigation ul li{display:inline-block;}
#navigation ul li a {margin-right:25px;}

Given the outermost #wrapper is of 940px width. The author showed naively change margin-right from 25px to 2.66%(25/940) doesn't work because the intermediate parent of <a> is <li>, which wasn't given a specific width.

Besides the author's suggested solution, the author provided another solution, which was change "display:inline-block" to "display:inline".

While I can understand the difference between inline and inline-block to some extent, thanks to these two StackOverflow passages(1,2), I don't know how exactly it works in this case.

I guess that inline stuff cannot stick close to each other, but inline-block can. Is that right?

I'm grateful for any advice. Thanks!