CSS display: inline 和 display: inline-block在CSS中有什么区别

在CSS中，display属性用于设置网页上HTML元素的显示样式。display属性有多个值，如flex、block、inline-block、inline、initial、inherit等。在本教程中，我们将学习display: inline和display: inline-block这两个CSS属性的区别。

display: inline是什么

display: inline CSS属性用于在同一行中显示HTML内容。它与HTML的元素非常相似。例如，div元素内的元素会将内容显示在同一行上。

此外，使用display: inline CSS属性无法设置元素的高度和宽度。

语法

用户可以按照以下语法使用”display: inline” CSS属性。

display: inline;

示例1

在下面的示例中，我们定义了一个类名为 ‘disp’ 的div元素。我们在div元素内添加了子div元素，并赋予了类名 ‘disp1’。

我们为嵌套的div设置了 ‘display: inline’ 的CSS属性，用户可以看到文本如何在同一行显示。

<html>
<head>
   <style>
      .disp {
         font-size: 1rem;
         height: 500px;
         width: 500px;
      }
      .disp1 {
         display: inline;
         font-size: 1.5rem;
         color: darkgray;
      }
   </style>
</head>
<body>
   <h3>Using the <i> display: inline </i> CSS property to show elements in single line</h3>
   <div class = "disp">
      This is a text of the div element. It's <div class="disp1"> Display </div> is <div class="disp1"> inline. </div>
   </div>
</body>
</html>

display: inline-block 是什么意思

‘display: inline-block’ CSS属性是“display: inline”和“display: block”两个CSS属性的组合。我们了解了 ‘display: inline’ 的含义。‘display: block’属性将HTML元素显示为块，我们可以为其设置尺寸。

‘display: inline-block’属性也将内容显示在同一行，但以块状形式呈现。

语法

用户可以按照以下语法来使用 ‘display: inline-block’ CSS属性。

display: inline-block;

示例2

在下面的示例中，父级div包含两个具有“display: inline-block”CSS属性的子div。在输出中，用户可以观察到其外观类似于“display: inline”。

<html>
<head>
   <style>
      .disp {
         font-size: 1.2rem;
         height: 500px;
         width: 500px;
      }
      .disp1 {
         display: inline-block;
         font-size: 1.5rem;
         color: blue;
      }
   </style>
</head>
<body>
   <h3>Using the <i> display: inline-block </i> CSS property to show elements in single line</h3>
   <div class = "disp">
      This is a text of the div element. It's <div class="disp1"> Display </div> is <div class="disp1"> inline-block.
      </div>
   </div>
</body>
</html>

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

display: inline 和 display: inline-block CSS 属性的主要区别是我们不能为 display: inline 设置尺寸。此外，我们可以为带有 ‘display: inline’ CSS 属性的 HTML 元素设置右边和左边的边距和填充。

示例3

在下面的示例中，容器 div 包含了两个 class 名称为 ‘inline’ 和 ‘inline-block’ 的 div。我们为 inline div 设置了 display: inline，并为 inline-block div 设置了 display: inline-block。

在输出中，用户可以观察到我们可以为带有 ‘display: inline-block’ 的 div 元素设置尺寸，即使我们为 ‘display: inline’ 设置尺寸，也不会受到影响。

<html>
<head>
   <style>
      .inline-block {
         background: grey;
         width: 200px;
         height: 200px;
         padding: 30px 30px 30px 30px;
         display: inline-block;
      }
      .inline {
         background: grey;
         width: 200px;
         height: 200px;
         margin-top: 10px;
         margin-bottom: 10px;
         display: inline;
      }
   </style>
</head>
<body>
   <h3>Using the <i> display: inline-block and display: inline </i> CSS property to show elements in single line. </h3>
   <div class = "container">
      <div class = "inline-block">
         This div has a display inline-block.
      </div>
      <div class = "inline">
         Display: inline
      </div>
   </div>
</body>
</html>

让我们通过对比表格来理解display: inline和display: inline-block的区别。

基础	display: inline	display: inline-block
尺寸	使用display: inline无法设置HTML元素的尺寸。	使用display: inline-block可以设置HTML元素的尺寸。
外边距	只允许设置右侧和左侧的外边距。	允许设置顶部、底部、右侧和左侧的外边距。
内边距	只允许设置右侧和左侧的内边距。	允许设置顶部、底部、右侧和左侧的内边距。