display：inline和display：inline-block有什么区别？

CSS

Near小胖

2020-03-17

inline和inline-block的CSS值之间到底有什么区别display？

第1898篇《display：inline和display：inline-block有什么区别？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

阳光Itachi村村 2020.03.17

splattne的答案可能涵盖了大多数内容，因此我不会重复同样的事情，而是：inline和CSS属性的inline-block行为有所不同direction。

在下一个代码片段中，您可以看到one two（按顺序）已渲染，就像在LTR布局中一样。我怀疑这里的浏览器会自动将英文部分检测为LTR文本，并从左到右进行渲染。

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

但是，如果我继续将其设置display为inline-block，则浏览器似乎会尊重该direction属性，并按从右到左的顺序依次渲染元素，从而two one渲染出来。

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

我不知道是否还有其他怪癖，我只是在Chrome上凭经验发现了这一点。

猿小小 2020.03.17

答案中未提及的一件事是，内联元素可以在行之间中断，而内联块不能（显然是块）！因此，内联元素可用于设置文本句子和其中的块的样式，但是由于无法填充它们，因此可以改用line-height。

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

路易西门 2020.03.17

display: inline;是在句子中使用的显示模式。例如，如果您有一个段落并想要突出显示一个单词，则可以执行以下操作：

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

该元素有一个display: inline;默认情况下，因为这个标签是在一个句子总是使用。该元素display: block;默认情况下有一个，因为它既不是句子也不是句子，而是句子的一部分。

的元素display: inline; 不能具有height或width或垂直margin。有一个元素display: block; 可以有width，height和margin。
如果您想将添加height到元素，你需要设置这个元素display: inline-block;。现在，您可以height在元素和其他所有块样式（的block一部分inline-block）中添加a ，但将其放置在句子中（的inline部分inline-block）。