display: inline 和 display: inline-block 都是CSS中的显示属性，它们定义了元素如何在页面上布局，但是它们之间有一些关键的区别：

1. 框模型：

   • display: inline：元素不会开始一个新的块级上下文，元素按照内联（水平）方向排列，处于同一行内。内联元素不会考虑上下margin和padding设置影响布局，且不允许设置宽度和高度。
   • display: inline-block：兼有inline和block元素的特点。它排列在同一行内，但是像块级元素一样，允许设置元素的宽度和高度。

2. 布局控制：

   • display: inline：因为无法设置宽高，所以对于布局控制有一定限制。通常用于不需要宽高控制的小元素，比如文字或者链接。
   • display: inline-block：可以设置宽度和高度，因此提供了更好的布局控制，适合需要特定大小但又希望在文本流中显示的元素。

3. 元素对齐：

   • display: inline：元素的垂直对齐受到 vertical-align 属性影响，通常是以基线对齐。
   • display: inline-block：元素虽然在一行显示，但可以像块级元素一样处理垂直对齐，使用 vertical-align 属性可以调整与其他行内元素的对齐方式。

示例

• display: inline 示例：假设你有一系列的链接，你想让它们在一行内显示，而不打断文本的流动。

  html
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  这些链接默认就是内联元素，它们会从左到右在一行内显示，除非行没有足够的空间。

• display: inline-block 示例：如果你有一组小的卡片，比如用户的头像，并希望它们在一行内显示，但又想控制每张卡片的大小。

  html
  <div class="user-avatar">Alice</div>
  <div class="user-avatar">Bob</div>
  <div class="user-avatar">Charlie</div>

  css
  .user-avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
  }

  每个 .user-avatar 元素会在一行内显示，但你可以控制它们的大小和边距，从而创建一个均匀的卡片布局，而不是简单的文本链接。

总结来说，如果你需要在同一行内显示元素，并对元素的大小和布局有更精细的控制，display: inline-block 是一个不错的选择。如果你只是需要简单的内联元素，不需要设置宽度和高度，display: inline 就足够了。

视觉答案

想象一下 中的一个<span>元素<div>。<span>例如，如果给元素设置 100px 的高度和红色边框，它看起来会像这样

显示方式： 内嵌

显示：内联块

显示：块

代码： http: //jsfiddle.net/Mta2b/

的元素与元素display:inline-block相似display:inline，但它们可以具有宽度和高度。这意味着您可以将内联块元素用作块，同时将其在文本或其他元素中流动。

支持样式的差异总结：

• 内联：仅margin-left, margin-right, padding-left,padding-right
• 内联块: margin, padding, height,width

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

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

该<em>元素display: inline;默认有一个，因为这个标签总是在句子中使用。该元素默认<p>有一个，因为它既不是一个句子，也不是在一个句子中，它是一个句子块。display: block;

元素display: inline; _不能_有 aheight或 awidth或垂直margin。元素display: block; _可以_有width,height和margin。
如果要给元素添加a height，<em>则需要将此元素设置为display: inline-block;。现在，您可以将 a 添加height到元素和所有其他块样式（ 的block部分inline-block），但它被放置在句子中（ 的inline部分inline-block）。

答案中没有提到的一件事是内联元素可以在行之间中断，而内联块不能（并且显然会阻止）！因此，内联元素对于设置文本句子和其中的块的样式很有用，但由于它们无法填充，因此您可以使用行高来代替。

shell
<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>

运行代码片段Hide results

展开片段

上述所有答案都提供了有关原始问题的重要信息。然而，有一个概括似乎是错误的。

可以将宽度和高度设置为至少一个内联元素（我能想到的） - 元素<img>。

这里和这个重复的两个接受的答案都表明这是不可能的，但这似乎不是一个有效的一般规则。

例子：

shell
img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

运行代码片段Hide results

展开片段

has ，但其和已成功设置img。display: inline``width``height

splattne 的答案可能涵盖了大部分内容，所以我不会重复同样的事情，但是：inline并且CSS 属性的inline-block行为有所不同direction。

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

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

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

span {
  display: inline;
}

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

运行代码片段Hide results

展开片段

但是，如果我继续设置display为inline-block，浏览器似乎会尊重该direction属性并按顺序从右到左渲染元素，以便two one渲染。

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

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

span {
  display: inline-block;
}

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

运行代码片段Hide results

展开片段

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