HTML元素间距异常求助：Sass编译后无法匹配Figma设计

我是前端新手，学HTML和CSS一两个月了，跟着课程做项目，现在要把Sass代码编译后还原Figma设计，但元素/容器的间距怎么调都不对，删了gap属性也没效果。

元素间距异常截图：

原Sass代码 #

@import "../utils/vars";
.features {
  display: flex;
  gap: 2px;
}
.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
  &__image {
    width: 270px;
    height: 120px;
    background: #f5f4fa;
    border-radius: 4px;
  }
  &__title {
    display: flex;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: $black-color;
  }
  &__description {
    display: flex;
    max-width: 50%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: $gray-color;
  }
  &__svg {
    transform: translate(97px, 24px);
  }
}

编译后的CSS代码 #

/* compiled SASS */

.features {
  display: flex;
  gap: 2px;
}

.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
}

.features-list__image {
  width: 270px;
  height: 120px;
  background: #f5f4fa;
  border-radius: 4px;
}

.features-list__title {
  display: flex;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: black;
}

.features-list__description {
  display: flex;
  max-width: 50%;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: gray;
}

.features-list__svg {
  transform: translate(97px, 24px);
}

HTML结构 #

<section class="section features">
  <ul class="list-content features-list">
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-antenna-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">ATTENTION TO DETAILS</h2>
      <p class="features-list__description">
        We go into all the details and processes of your business to develop a customized solution.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-clock-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PUNCTUALITY</h2>
      <p class="features-list__description">
        With us, you can feel safe and secure. An important principle of the company: respect your time and deadlines.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-diagram-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PLANNING</h2>
      <p class="features-list__description">
        You will be able to observe and participate in every phase of solution development and implementation.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-astronaut-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">MODERN TECHNOLOGIES</h2>
      <p class="features-list__description">
        We use innovative tools to solve assigned tasks. It's time to simplify work processes.
      </p>
    </li>
  </ul>
</section>

1. 修复Flex嵌套问题 #

.features是section容器，不需要设置display: flex——里面的ul.features-list已经是flex布局，嵌套flex会导致外层把ul当成单个flex item，破坏整体布局，直接删掉该属性即可。

2. 重置列表默认样式 #

浏览器默认给ul和li添加了padding、margin和列表标记，必须清除才能精准控制间距：

.list-content {
  padding: 0;
  margin: 0;
  list-style: none;
}

3. 调整Flex布局核心参数 #

给.features-list的li设置flex: 1，让每个feature项均分可用宽度，同时加大gap值匹配Figma设计（比如gap: 30px，具体数值以Figma标注为准）：

.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 30px; // 替换原2px的小间距
  li {
    flex: 1; // 强制均分宽度
    max-width: 270px; // 和图片宽度保持一致，防止过度拉伸
  }
}

4. 移除不必要的display:flex #

.features-list__title和.features-list__description是文本元素，不需要设为flex布局，改成块级元素后，用margin控制垂直间距更方便：

&__title {
  // 删掉display: flex;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: $black-color;
  margin-top: 30px; // 图片和标题的间距
  margin-bottom: 15px; // 标题和描述的间距
}
&__description {
  // 删掉display: flex;
  max-width: 100%; // 改成100%，占满li的可用宽度
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: $gray-color;
}

5. 正确居中SVG #

不用transform定位，直接给.features-list__image添加flex居中属性，定位更可靠且易维护：

&__image {
  width: 270px;
  height: 120px;
  background: #f5f4fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 同时删掉&__svg的transform属性
&__svg {
  // 删掉transform: translate(97px, 24px);
}

内容的提问来源于stack exchange，提问作者Nicolae Gabriel Alexandru