CSS display: inline和display: inline-block的区别是什么

在本文中，我们将介绍CSS中display: inline和display: inline-block两种属性的区别以及它们在布局和元素排列方面的应用。

阅读更多：CSS 教程

display: inline和display: inline-block的定义

display: inline和display: inline-block都是CSS中的display属性值，用于定义元素在文档流中的显示方式。

display: inline将元素作为内联元素显示，不独占一行，不会换行。它在水平方向上与相邻元素（内联元素和文本）在同一行显示。
display: inline-block将元素作为内联块级元素显示，同样不独占一行，但是可以设置宽度、高度、内边距和外边距等属性，且可以垂直对齐。

display: inline和display: inline-block的区别

1. 盒模型

display: inline元素没有盒模型的概念，宽度和高度会被忽略，只会包裹住元素的内容。而display: inline-block元素则有盒模型的概念，可以设置宽度、高度、内外边距等属性。

例如，在以下示例中，两个元素的内容都是”Hello”，但是display: inline的元素没有设置宽度，而display: inline-block的元素设置了宽度为200px。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .inline {
        display: inline;
        background-color: coral;
      }
      .inline-block {
        display: inline-block;
        width: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <span class="inline">Hello</span>
    <span class="inline-block">Hello</span>
  </body>
</html>

2. 横向排列

display: inline元素在水平方向上与相邻元素在同一行显示，不独占一行。而display: inline-block元素同样不独占一行，并且可以设置宽度。

以下示例中，三个元素都是display: inline，它们会在同一行显示，如果内容过长则会自动换行。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .inline {
        display: inline;
        background-color: coral;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <span class="inline">Hello</span>
    <span class="inline">World</span>
    <span class="inline">CSS</span>
  </body>
</html>

3. 垂直对齐

display: inline元素无法通过垂直对齐属性进行精确的垂直对齐操作，它的垂直对齐是基于基线的。

然而，display: inline-block元素可以通过垂直对齐属性（例如vertical-align）进行灵活的垂直对齐调整。

以下示例中，两个元素都是display: inline-block，它们的垂直对齐方式通过vertical-align属性分别设置为top和middle。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .inline-block {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: skyblue;
        vertical-align: top;
      }
      .inline-block-middle {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: coral;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <span class="inline-block">Inline Block 1</span>
    <span class="inline-block-middle">Inline Block 2</span>
  </body>
</html>