diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx
index e8a867e4a..86142c3c9 100644
--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/packages/vant/src/nav-bar/NavBar.tsx
@@ -82,8 +82,11 @@ export default defineComponent({
           ref={navBarRef}
           style={style}
           class={[
-            bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
-            { [BORDER_BOTTOM]: border },
+            bem({ fixed }),
+            {
+              [BORDER_BOTTOM]: border,
+              'van-safe-area-top': props.safeAreaInsetTop,
+            },
           ]}
         >
           <div class={bem('content')}>
diff --git a/packages/vant/src/nav-bar/test/index.spec.ts b/packages/vant/src/nav-bar/test/index.spec.ts
index 8d5cf699b..584e06a7b 100644
--- a/packages/vant/src/nav-bar/test/index.spec.ts
+++ b/packages/vant/src/nav-bar/test/index.spec.ts
@@ -74,7 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
     },
   });
 
-  expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top');
+  expect(wrapper.classes()).toContain('van-safe-area-top');
 });
 
 test('should change z-index when using z-index prop', () => {
diff --git a/packages/vant/src/style/README.md b/packages/vant/src/style/README.md
index fcbcdb223..22b13979f 100644
--- a/packages/vant/src/style/README.md
+++ b/packages/vant/src/style/README.md
@@ -49,11 +49,15 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <div class="van-hairline--surround"></div>
 ```
 
-### Safe Area Bottom
+### Safe Area
 
-Enable safe area inset bottom.
+Enable safe area.
 
 ```html
+<!-- top -->
+<div class="van-safe-area-top"></div>
+
+<!-- bottom -->
 <div class="van-safe-area-bottom"></div>
 ```
 
diff --git a/packages/vant/src/style/README.zh-CN.md b/packages/vant/src/style/README.zh-CN.md
index 2e6e4ab68..6ac9e0e4d 100644
--- a/packages/vant/src/style/README.zh-CN.md
+++ b/packages/vant/src/style/README.zh-CN.md
@@ -47,11 +47,15 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```
 
-### 底部安全区
+### 安全区
 
-为元素添加底部安全区适配。
+为元素添加安全区适配。
 
 ```html
+<!-- 顶部安全区 -->
+<div class="van-safe-area-top"></div>
+
+<!-- 底部安全区 -->
 <div class="van-safe-area-bottom"></div>
 ```
 
diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less
index 3b493208e..29d127811 100644
--- a/packages/vant/src/style/base.less
+++ b/packages/vant/src/style/base.less
@@ -26,6 +26,11 @@
   .multi-ellipsis(3);
 }
 
+.van-safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
 .van-safe-area-bottom {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);