CSS 中 display inline 和 display inline block 之间的区别是什么？

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 就足够了。

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）。