"responsive web design with html5 and css3" 中的内联和内联块差异

Question

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

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;}

假设最外层的#wrapper 宽度为 940px。作者天真地将 margin-right 从 25px 更改为 2.66%(25/940) 不起作用，因为 <a> 的中间父级是 <li>，没有指定特定宽度。

除了作者建议的解决方案外，作者还提供了另一种解决方案，即将"display:inline-block"改为"display:inline"。

虽然我可以在一定程度上理解 inline 和 inline-block 之间的区别，但由于这两个 Whosebug 段落（1,2），我不知道它在这种情况下究竟是如何工作的。

我想 inline 的东西不能彼此靠近，但 inline-block 可以。是吗？

我很感激任何建议。谢谢！

Answer 1

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

Answer 2

percentage margins 的定义是

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

生成的框是 a 元素的框，其 containing block 是其最近的块容器祖先。

inline-block的元素是块容器，所以当li元素是inline-block时，它是a元素的包含块，margin是占块的百分比li 元素的宽度。

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

内联元素不是块容器，所以当li元素是内联时，ul元素是a元素的包含块，margin是百分比ul 元素的宽度，与 #wrapper 元素的宽度相同。

"responsive web design with html5 and css3" 中的内联和内联块差异

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

html

javascript

css

responsive-design

web