title: inline and inline-block difference in "responsive web design with html5 and css3"
body: <p>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.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;some other thing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>#navigation ul li{display:inline-block;}
  #navigation ul li a {margin-right:25px;}
  </code></pre>
  
  <p>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 <code>&lt;a&gt;</code> is <code>&lt;li&gt;</code>, which wasn't given a specific width. </p>
  
  <p>Besides the author's suggested solution, the author provided another solution, which was change "display:inline-block" to "display:inline".</p>
  
  <p>While I can understand the difference between inline and inline-block to some extent, thanks to these two StackOverflow passages(<a href="https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block">1</a>,<a href="https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block">2</a>), I don't know how exactly it works in this case. </p>
  
  <p>I guess that inline stuff cannot stick close to each other, but inline-block can. Is that right?</p>
  
  <p>I'm grateful for any advice. Thanks!</p>