CodePen Embed - flex vs inline gap

<div class="container">
  <div class="content-container">
    <span class="item">元素1</span>
    <span class="item">元素2</span>
  </div>
  <br />

  <div class="content-container flex">
    <span  class="item">元素1</span>
    <span  class="item">元素2</span>
  </div>
</div>

.container {
  font-size: 52px;
  text-align:center;
  margin: 60px auto;
}

.content-container {
  display: inline-block;
  background: #ececec;
  margin-bottom: 16px;
}

.flex {
  display: inline-flex;
}

This Pen is owned by anran758 on CodePen.

See more by @anran758 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.