CSS inline-block 属性用于将元素显示为内联级块容器。内联块元素不会从新行开始，但可以将它们设置为特定的宽度和高度。

以下是内联块inline-block属性的一些特征:

  • 该元素将与其他内联元素显示在同一行。

  • 该元素将具有宽度和高度，但是默认情况下，它没有边距或填充。

  • 该元素可以浮动或定位。

  • 该元素可以清除浮动。

display: inline-block 属性是 display: inline 和 display: block 属性的组合。它不仅允许元素表现得像内联元素，而且还能够像块元素一样占用行上的空间。

display: inline、display: block 和 display: inline-block 之间的区别:

inline
blockinline-block
元素显示在同一行。元素显示在新行。元素显示在同一行。
它不占据容器的整个宽度。它占据容器的整个宽度。它不占据容器的整个宽度。
默认没有边距或填充。默认有边距和填充.默认有外边距和内边距。

下图展示了内联、块和内联的不同布局行为-block 元素:

CSS 内联块

CSS inline-block: 具有不同的行为

下面是一个示例，演示了display: inline、display: block 和 display: inline-block 属性 -

<html>
<head>
<style>
   .display-inline {
      display: inline;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      text-align: center;
   }
   .display-block {
      display: block;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      height: 30px;
      text-align: center;
   }
   .display-inline-block {
      display: inline-block;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      height: 30px;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Display Inline</h2>
   <div>A man can succeed at almost anything for which he has unlimited enthusiasm.
      <span class="display-inline">Yxjc123</span> ,
      无论何事，只要对它有无限的热情你就能取得成功。</div>

   <h2>Display Block</h2>
   <div>A man can succeed at almost anything for which he has unlimited enthusiasm.
      <span class="display-block">Yxjc123</span> ,
      无论何事，只要对它有无限的热情你就能取得成功。</div>

   <h2>Display Inline Block</h2>
   <div>A man can succeed at almost anything for which he has unlimited enthusiasm.
      <span class="display-inline-block">Yxjc123</span> ,
     无论何事，只要对它有无限的热情你就能取得成功。</div>
</body>
</html>

CSS inline-block: 导航链接

使用 inline-block 属性创建水平导航菜单或列表，其中每个导航项显示为块级元素，但与其他项保持内联。

<html>
<head>
<style>
   ul {
      list-style-type: none;
      margin: 0;
      padding: 15px;
      background-color: #1f9c3f;
   }
   li {
      display: inline-block;
   }
   a {
      padding: 10px;
      color: rgb(247, 247, 247);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#">Yxjc123</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">About us</a></li>
   </ul>
</body>
</html>

CSS inline-block: 按钮组

您可以使用 inline-block 属性创建水平显示的按钮组。这些按钮将一起显示在同一行，并且它们将具有特定的宽度和高度。

<html>
<head>
<style>
   .button-group {
      display: inline-block;
      background-color: #ef4343;
   }
   button {
      padding: 10px;
      margin: 10px;
      background-color: #1f9c3f;
      border: none;
      color: #ffffff;
      width: 80px;
      height: 40px;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button>Submit</button>
      <button>Cancel</button>
      <button>Reset</button>
   </div>
</body>
</html>

CSS inline-block: 图像和文本

inline-block 属性使图像和跨度显示在同一行上，从而允许它们在块内水平对齐。

<html>
<head>
<style>
   div {
      display: inline-block;
   }
   img {
      width: 100px;
      height: 100px;
   }
   span {
      padding: 10px;
   }
</style>
</head>
<body>
   <div>
      <img src="/css/images/tutimg.png" alt="Image">
      <span>Yxjc123</span>
   </div>
</body>
</html>

CSS inline-block: 进度条

We可以使用inline-block属性创建进度条。该属性与其他内联元素显示在同一行。

<html>
<head>
<style>
   .progress-bar {
      display: inline-block;
      width: 100%;
      height: 25px;
      background-color: blue;
      border-radius: 15px;
      overflow: hidden;
   }
   .progress-bar-fill {
      width: 70%;
      background-color: #1f9c3f;
      height: 100%;
   }
</style>
</head>
<body>
   <div class="progress-bar">
      <div class="progress-bar-fill"></div>
   </div>
</body>
</html>