diff --git a/docs/component/gap.md b/docs/component/gap.md
new file mode 100644
index 00000000..3cdb3fb9
--- /dev/null
+++ b/docs/component/gap.md
@@ -0,0 +1,50 @@
+<frame/>
+
+# Gap 间隔槽
+一般用于页面布局时代替margin或者padding;或者充当（底部）占位元素。
+
+## 基本使用
+
+通过 `height` 属性设置标题 `background` 属性设置背景色。
+
+
+```html
+<wd-gap bg-color="#FFFFFF"></wd-gap>
+```
+
+## 自定义背景色
+
+
+```html
+<wd-gap bg-color="#4D80F0"></wd-gap>
+```
+
+## 自定义高度
+
+
+```html
+<wd-gap bg-color="#4D80F0" height="120rpx"></wd-gap>
+```
+
+
+
+## 底部安全区
+
+
+```html
+<wd-gap bg-color="#FFFFFF"></wd-gap>
+```
+
+## Attributes
+
+| 参数              | 说明      | 类型      | 可选值        | 默认值         | 最低版本 |
+|-----------------|---------|---------|------------|-------------| -------- |
+| height          | 高度      | string  | -          | 30rpx       | -        |
+| background      | 背景颜色    | string  |            | transparent | -        |
+| safeAreaBbottom | 底部安全区  | boolean | true/false | false       | -        |
+
+## 外部样式类
+
+| 类名                 | 说明             | 最低版本 |
+| -------------------- | ---------------- | -------- |
+| custom-class         | 自定义样式 | -        |
diff --git a/src/pages.json b/src/pages.json
index 65a04199..f40dba8e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -701,6 +701,16 @@
         },
         "navigationBarTitleText": "NumberKeyboard 数字键盘"
       }
+    },
+    {
+      "path": "pages/gap/Index",
+      "name": "gap",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "Gap 间隔槽"
+      }
     }
   ],
   // "tabBar": {
@@ -723,4 +733,4 @@
     // "navigationBarBackgroundColor": "#FFF",
     // "backgroundColor": "#F8F8F8"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/gap/Index.vue b/src/pages/gap/Index.vue
new file mode 100644
index 00000000..4b8fdf2c
--- /dev/null
+++ b/src/pages/gap/Index.vue
@@ -0,0 +1,34 @@
+<template>
+  <page-wraper>
+    <view>
+      <demo-block title="基本使用" transparent>
+        <wd-gap bg-color="#FFFFFF"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义背景颜色" transparent>
+        <wd-gap bg-color="#4D80F0"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义高度" transparent>
+        <wd-gap bg-color="#4D80F0" height="120rpx"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义样式" transparent>
+        <wd-gap custom-class="custom-gap"></wd-gap>
+      </demo-block>
+      <demo-block custom-class="custom-safe-area-bottom" title="底部安全区" transparent>
+        <wd-gap bg-color="#FFFFFF" safe-area-bottom height="120rpx"></wd-gap>
+      </demo-block>
+    </view>
+  </page-wraper>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+:deep(.custom-safe-area-bottom) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+:deep(.custom-gap) {
+  padding-bottom: 120rpx;
+  background: #34d19d !important;
+}
+</style>
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
index 22a2865f..3442a716 100644
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@@ -299,6 +299,10 @@ const list = ref([
         id: 'divider',
         name: 'Divider 分割线'
       },
+      {
+        id: 'gap',
+        name: 'Gap 间隔槽'
+      },
       {
         id: 'img',
         name: 'Img 图片'
diff --git a/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue b/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue
new file mode 100644
index 00000000..bb2bd7cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue
@@ -0,0 +1,35 @@
+<template>
+  <view :style="{ background: bgColor }" :class="[customClass]">
+    <view :style="{ height: height }"></view>
+    <view v-if="safeAreaBottom" :style="{ height: 'var(--window-bottom)' }"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-gap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+interface Props {
+  bgColor?: string
+  safeAreaBottom?: boolean
+  customClass?: string
+  height?: string
+}
+withDefaults(defineProps<Props>(), {
+  // 背景颜色（默认transparent）
+  bgColor: 'transparent',
+  //额外添加底部安全区高度
+  safeAreaBottom: false,
+  //分割槽高度，单位rpx（默认30）
+  height: '30rpx',
+  customClass: ''
+})
+</script>