Javascript “中的内联和内联块差异”；采用html5和css3的响应性网页设计”；

我在阅读“HTML5和CSS3响应式Web设计”第3章流体布局时遇到了这个问题。作者试图将固定像素大小更改为基于百分比的流体大小。下面是html和css代码

html:

假设最外层的包装宽度为940px。作者天真地将保证金从25px改为2.66%（25/940）是行不通的，因为

，）的中间父级，我不知道它在这种情况下到底是如何工作的

我猜内联的东西不能彼此贴紧，但内联块可以。是这样吗

我很感激你的建议。谢谢
 says的定义

    **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/

百分比是根据生成的框的包含块的宽度计算的

生成的框是
a
元素的框，它是最近的块容器祖先

内联块的元素是块容器，因此当
li
元素是内联块时，它是
a
元素的包含块，边距是
li
元素宽度的百分比

此外，内联块元素的“收缩以适应”特性会创建循环依赖关系。边距取决于
li
元素的宽度，
li
元素的宽度取决于
a
元素的边距。在这种情况下，调整边距以解决这种情况是正常的，在这种情况下，将边距设置为0

内联的元素不是块容器，因此当
li
元素内联时，
ul
元素是
a
元素的包含块，边距是
ul
元素宽度的百分比，这与
#wrapper
元素的宽度相同。
请小心将
li
设置为
inline block
，它不能很好地与一些旧版本的IE配合使用。最好使用
inline
，然后将此子体
a
设置为
inline block
。
#navigation ul li{display:inline-block;}
#navigation ul li a {margin-right:25px;}

    **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/