flex与inline-block布局异常：元素右侧莫名间距，无法横向对齐

核心问题分析 #

你的代码里.botblock容器未设置水平布局，内部子元素默认是块级元素会自动换行；同时存在重复的display属性定义，导致布局冲突。以下是针对性修改：

修改步骤 #

1. 给.botblock添加Flex布局：让logo、社交区块、邮件区块在同一行水平排列，同时垂直居中适配底部栏高度
2. 清理重复的display属性：.social里重复定义了flex和inline-block，保留文字样式即可
3. 调整区块间距：通过margin-left给社交区块、邮件区块设置左侧间距，替代默认空白

修改后的完整代码 #

CSS部分

.bottom {
  margin: 90px auto 74px;
  width: 1440px;
  height: 85px;
  background: #1D0E2D;
  border-radius: 25px;
  opacity: 80%;
}

.botblock {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px; /* 可选：添加内边距避免元素贴边 */
}

.social {
  color: white;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 20px;
}

.money {
  color: white;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 20px;
}

.social-block {
  display: flex;
  align-items: center;
  margin-left: 40px; /* 与logo的间距 */
}

.email-block {
  display: flex;
  align-items: center;
  margin-left: 40px; /* 与社交区块的间距 */
}

.bottom img {
  max-width: 36px;
  margin-left: 12px;
}

.logo-bottom {
  color: white; /* 可选：给logo设置颜色，确保显示正常 */
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
}

HTML部分

<div class="bottom">
  <div class="botblock">
    <a class="logo-bottom" href="">
      <span class="pro">PRO<span class="white">moblox</span></span>
    </a>

    <div class="social-block">
      <span class="social">Мы в социальных сетях: </span>
      <div class="disc">
        <a class="DISCORD" href="#">
          <img src="CSS/img/disc.png" alt="Discord">
        </a>
      </div>
      <div class="telega">
        <a class="TELEGRAM" href="#">
          <img src="CSS/img/teleg.png" alt="Telegram">
        </a>
      </div>
      <div class="vkont">
        <a class="VK" href="#">
          <img src="CSS/img/vk.png" alt="VK">
        </a>
      </div>
    </div>

    <div class="email-block">
      <span class="money">Для сотрудничества: </span>
      <a class="EMAIL" href="#">
        <img src="CSS/img/gmail.png" alt="Email">
      </a>
    </div>
  </div>
</div>

效果说明 #

修改后所有元素会在同一行水平排列，垂直方向居中对齐，区块间的间距可以通过调整margin-left数值自定义，不会出现莫名的空白间隔。

内容的提问来源于stack exchange，提问作者RoDeZ