CSS display: inline 与 display: inline-block 的区别

在本文中，我们将介绍 CSS 中 display 属性中 display: inline 和 display: inline-block 的区别。display 属性用于定义 HTML 元素的显示模式。通过掌握 inline 和 inline-block 的区别，我们可以更好地理解并应用 CSS。

阅读更多：CSS 教程

display: inline

display: inline 用于将元素以行内块的方式进行显示。通过将元素设置为 inline，可以让元素与其他行内元素在同一行显示，并不会独占一行。

inline 元素的特点包括：
– 不会有多余的空间，元素与其他行内元素在一行显示。
– 不支持设置 width 和 height。
– 不支持 margin 和 padding 的上下方向的设置，只能设置左右方向的 margin 和 padding。
– 不支持使用 float 和 clear 属性。
– 默认情况下，元素的底端与行内文字的底部对齐。

以下是一个使用 display: inline 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: lightblue;
      border: 1px solid black;
      display: inline;
      padding: 10px;
    }
  </style>
</head>
<body>

<h2>display: inline 示例</h2>

<span class="box">行内元素1</span>
<span class="box">行内元素2</span>
<span class="box">行内元素3</span>

</body>
</html>

运行以上代码，可以看到三个带有样式的行内元素以行内块的方式显示在同一行，并且它们不会独占一行空间。

display: inline-block

display: inline-block 同样用于将元素以行内块的方式进行显示。与 display: inline 相比，display: inline-block 具有以下区别：

inline-block 元素的特点包括：
– 不会独占一行，可以与其他行内元素在同一行显示。
– 支持设置 width 和 height。
– 支持设定 margin 和 padding 的上下方向和左右方向的值。
– 支持 float 和 clear 属性。
– 默认情况下，元素的底端与行内文字的底部对齐。

以下是一个使用 display: inline-block 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: lightblue;
      border: 1px solid black;
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>

<h2>display: inline-block 示例</h2>

<span class="box">行内块元素1</span>
<span class="box">行内块元素2</span>
<span class="box">行内块元素3</span>

</body>
</html>