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

cssweb developmentfront end technology更新于 2024/3/22 4:28:17

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

什么是 Display: Inline?

CSS 属性 display: inline 用于在同一行显示 HTML 内容。它与 HTML 的 ≪span> 元素非常相似。例如，≪span> 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"CSS 属性显示块中的 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 包含两个类名为"inline"和"inline-block"的 div。我们为内联 div 设置了 display: inline，为内联块 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 元素的尺寸。
Margin (边距)	它仅允许设置左右边距。	它允许设置上、下、右、左边距。
Padding (内边距)	它仅允许设置左右内边距。	它允许设置上、下、右、左内边距。