本文详解如何通过 gap 和 padding 配置，结合 CSS 重置图片宽度，为 Splide 轮播图添加滑块间间隙及两侧内边距，解决滑块紧贴、无呼吸感的常见布局问题。

本文详解如何通过 gap 和 padding 配置，结合 css 重置图片宽度，为 splide 轮播图添加滑块间间隙及两侧内边距，解决滑块紧贴、无呼吸感的常见布局问题。

Splide 默认将每个 .splide__slide 视为独立容器，但若内部 <img> 元素未设置明确宽度（如 width: 100%），其自然尺寸可能撑满父容器或导致布局错位，进而使 gap 属性失效——这正是你遇到“滑块紧贴”“间隙不生效”甚至“图片堆叠显示”的根本原因。

✅ 正确做法分三步：

1. 启用 gap 并指定带单位的值
gap 必须带单位（如 '20px'、'3rem' 或 '1em'），纯数字（如 20）会被忽略。它作用于 .splide__list 内部相邻 .splide__slide 元素之间，是实现滑块横向/纵向间距的核心配置：

var splide = new Splide('.splide', {
  type   : 'loop',
  gap    : '2rem',     // ✅ 推荐使用 rem/px，确保可缩放且语义清晰
  padding: '2.5rem',  // ✅ 左右内边距，让首尾滑块不贴边
  height : '800px',
}).mount();

2. 强制图片填满滑块容器
默认 <img> 是内联元素，具有固有宽高和 vertical-align: baseline，易造成底部空白或尺寸不稳定。务必添加以下 CSS：

.splide__slide img {
  display: block;
  width  : 100%;
  height : auto;
}

⚠️ 注意：仅设 width: 100% 不够，display: block 可消除行内元素默认间隙；height: auto 保证等比缩放，避免拉伸变形。

3. 确保基础资源加载正确
引入官方 CSS 与 JS（推荐 CDN）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"><script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

? 额外提示：

• 若使用 type: 'slide'（非 loop），建议搭配 perPage: 1 + focus: 'center' 实现居中+留白效果；
• padding 是相对于 .splide__track 的左右偏移，不影响滑块内容，仅控制可视区域边界；
• 响应式场景下，可用 mediaQueries 动态调整 gap 和 padding，例如在移动端设为 '1rem'。

完整最小可行示例（可直接运行）：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"><style>
    .splide__slide img {
      display: block;
      width: 100%;
      height: auto;
    }
  </style><section class="splide" aria-label="Beautiful Images"><div class="splide__track">
      <ul class="splide__list">
<li class="splide__slide"><img src="https://picsum.photos/id/200/800/600?x-oss-process=image/resize,p_40" alt="Nature 1"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/201/800/600?x-oss-process=image/resize,p_40" alt="Nature 2"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/202/800/600?x-oss-process=image/resize,p_40" alt="Nature 3"></li>
      </ul>
</div>
  </section><script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script><script>
    new Splide('.splide', {
      type   : 'loop',
      gap    : '2rem',
      padding: '2.5rem',
      height : '800px',
      perPage: 1,
      arrows : true,
      pagination: true,
    }).mount();
  </script>

至此，你将获得与 Splide 官方 Demo 一致的优雅间距效果：滑块之间留有呼吸感，首尾滑块与视口边缘保持协调留白，整体视觉更专业、更具设计感。