div中加入内容会下沉

复现

有这样一个布局.

上半部分有三个div, 没有使用定位或浮动, 调整好布局后, 显示正常.

    <!-- 配置部分 -->
    <div>
      <!-- 展示部分 -->
      <div class="configPart">
        <div class="showPart">
          <div class="showSelectDiv">
            <!-- <span>F&Q</span> -->
          </div>
          <svg
            t="1646033760309"
            class="icon"
            viewBox="0 0 2560 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5116"
            width="128"
            height="128"
          >
            <path
              d="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"
              fill="#cdcdcd"
              p-id="5117"
            ></path>
          </svg>
          <div class="showSelectDiv"></div>
          <svg
            t="1646033760309"
            class="icon"
            viewBox="0 0 2560 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5116"
            width="128"
            height="128"
          >
            <path
              d="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"
              fill="#cdcdcd"
              p-id="5117"
            ></path>
          </svg>
          <div class="showSelectDiv"></div>
        </div>
        <!-- 按钮部分 -->
        <div class="btnDiv">
          <el-button type="primary" round>F&Q</el-button>
          <el-button type="primary" round>KG</el-button>
          <el-button type="primary" round>TASK</el-button>
        </div>
      </div>
    </div>

.configPart {
  padding: 20px 10px;
  margin: 0 auto;
  width: 1000px;
  border: 1px solid #ccc;
  .showPart {
    height: 128px;

    .showSelectDiv {
      display: inline-block;
      border: 1px dashed #ccc;
      width: 200px;
      height: 100px;
      margin: 14px 20px;
    }
  }
}

但是当在div中加入文字后, div下沉了.

原因

这里首先要关注一个属性 vertical-align: baseline;

vertical-align所有属性值：

baseline，top，middle，bottom，text-top，text-bottom

属性的作用范围：

vertical-align只对内联元素（或者display：inline-block的块级元素）有效，并根据父级元素的位置定位。

通俗来讲就是：此属性是为了确定此行内元素在他父级元素中的垂直距离

在没有定义的时候 vertical-align 默认值是 baseline ;行内元素会根据 vertical-align 来进行垂直方向的对齐；

一开始空 div 的 baseline 默认在底部，而有了文字之后就根据文字的 baseline 确定；而文字的 baseline又受到 font-size和 line-height属性的影响. 所以会导致div下沉.

解决

在div中加入:

vertical-align: top;