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

Question

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!

Be careful setting `li` to `inline-block`, it doesn't play nicely with some older versions of IE. Best off using `inline` and then setting this descendant `a` to `inline-block`. — Marty, May 15 '15 at 05:30

J.M.Farook · Answer 1 · 2015-05-15T05:35:58.740

    **Inline elements:**

    1.respect left & right margins and padding, but not top & bottom
    2.cannot have a width and height set
    3.allow other elements to sit to their left and right.

    **Block elements:**

    1. respect all of those
    2. force a line break after the block element

   **Inline-block elements:**

    1.allow other elements to sit to their left and right
    2.respect top & bottom margins and padding
    3. respect height and width

  refer:  https://jsfiddle.net/khbk3o2s/1/

Alohci · Accepted Answer · 2015-05-15T07:44:44.983

The definition for percentage margins says

The percentage is calculated with respect to the width of the generated box's containing block.

The generated box is that of the a element, and its containing block is its nearest block container ancestor.

Elements which are inline-block are block containers, so when the li element is inline-block, it is the a element's containing block, and the margin would be the percentage of the width of the li element.

Furthermore, the shrink-to-fit nature of inline-block elements, creates a circular dependency. The margin depends on the width of the li element, and the width of the li element depends on the margin of the a element. In such cases, it is normal for margins to be adjusted to resolve such situations, in this case by setting them to 0.

Elements which are inline are not block containers, so when the li element is inline, the ul element is the a element's containing block, and the margin is the percentage of the width of the ul element, which is the same as the width of the #wrapper element.

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

2 Answers2