diff --git a/docs/en-US/component/descriptions.md b/docs/en-US/component/descriptions.md
index 2d6cf93ab6..7762d0a84c 100644
--- a/docs/en-US/component/descriptions.md
+++ b/docs/en-US/component/descriptions.md
@@ -59,7 +59,7 @@ descriptions/customized-style
 | size                 | size of list                               | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | —          |
 | title                | title text, display on the top left        | ^[string]                                      | ''         |
 | extra                | extra text, display on the top right       | ^[string]                                      | ''         |
-| label-width ^(2.8.8) | label width of every column                | ^[string] / ^[number]                          | ''         |
+| label-width ^(2.8.8) | label width of every column                | ^[string] / ^[number]                          | —          |
 
 ### Descriptions Slots
 
@@ -80,7 +80,7 @@ descriptions/customized-style
 | rowspan ^(2.8.1)     | the number of rows a cell should span                                                                                                                                                        | ^[number]                              | 1       |
 | width                | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)                                                      | ^[string] / ^[number]                  | ''      |
 | min-width            | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number]                  | ''      |
-| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`                                                     | ^[string] / ^[number]                  | ''      |
+| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`                                                     | ^[string] / ^[number]                  | —       |
 | align                | column content alignment (If no `border`, effective for both label and content)                                                                                                              | ^[enum]`'left' \| 'center' \| 'right'` | left    |
 | label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)                                                  | ^[enum]`'left' \| 'center' \| 'right'` | —       |
 | class-name           | column content custom class name                                                                                                                                                             | ^[string]                              | ''      |
diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md
index b6c474d3c4..ad9ae76cb9 100644
--- a/docs/en-US/component/form.md
+++ b/docs/en-US/component/form.md
@@ -179,7 +179,7 @@ form/accessibility
 | prop                    | A key of `model`. It could be a path of the property (e.g `a.b.0` or `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required. | ^[string] / ^[string[]]                     | —       |
 | label                   | Label text.                                                                                                                                                            | ^[string]                                           | —       |
 | label-position ^(2.7.7) | Position of item label. If set to `'left'` or `'right'`, `label-width` prop is also required. Default extend `label-position` of `form`.                               | ^[enum]`'left' \| 'right' \| 'top'`                 | ''      |
-| label-width             | Width of label, e.g. `'50px'`. `'auto'` is supported.                                                                                                                  | ^[string] / ^[number]                               | ''      |
+| label-width             | Width of label, e.g. `'50px'`. `'auto'` is supported.                                                                                                                  | ^[string] / ^[number]                               | —       |
 | required                | Whether the field is required or not, will be determined by validation rules if omitted.                                                                               | ^[boolean]                                          | —       |
 | rules                   | Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).             | ^[object]`Arrayable<FormItemRule>`                  | —       |
 | error                   | Field error message, set its value and the field will validate error and show this message immediately.                                                                | ^[string]                                           | —       |
diff --git a/packages/components/affix/src/affix.vue b/packages/components/affix/src/affix.vue
index ef20f29f6e..6a01cf39be 100644
--- a/packages/components/affix/src/affix.vue
+++ b/packages/components/affix/src/affix.vue
@@ -64,7 +64,7 @@ const rootStyle = computed<CSSProperties>(() => {
 const affixStyle = computed<CSSProperties>(() => {
   if (!fixed.value) return {}
 
-  const offset = props.offset ? addUnit(props.offset) : 0
+  const offset = addUnit(props.offset)
   return {
     height: `${rootHeight.value}px`,
     width: `${rootWidth.value}px`,
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index b2bc199efb..80d15f4f00 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -48,7 +48,7 @@ const sizeStyle = computed(() => {
   const { size } = props
   return isNumber(size)
     ? (ns.cssVarBlock({
-        size: addUnit(size) || '',
+        size: addUnit(size)!,
       }) as CSSProperties)
     : undefined
 })
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 42c7d3ebd6..946e048519 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -50,8 +50,8 @@ const style = computed<StyleValue>(() => {
   return [
     {
       backgroundColor: props.color,
-      marginRight: addUnit(-(props.offset?.[0] ?? 0)),
-      marginTop: addUnit(props.offset?.[1] ?? 0),
+      marginRight: addUnit(-props.offset[0]),
+      marginTop: addUnit(props.offset[1]),
     },
     props.badgeStyle ?? {},
   ]
diff --git a/packages/components/descriptions/src/description-item.ts b/packages/components/descriptions/src/description-item.ts
index 776358445c..30bd6a18e9 100644
--- a/packages/components/descriptions/src/description-item.ts
+++ b/packages/components/descriptions/src/description-item.ts
@@ -51,7 +51,6 @@ export const descriptionItemProps = buildProps({
    */
   labelWidth: {
     type: [String, Number],
-    default: '',
   },
   /**
    * @description column content alignment (If no `border`, effective for both label and content)
diff --git a/packages/components/descriptions/src/description.ts b/packages/components/descriptions/src/description.ts
index 277ac6dd20..555414493b 100644
--- a/packages/components/descriptions/src/description.ts
+++ b/packages/components/descriptions/src/description.ts
@@ -47,7 +47,6 @@ export const descriptionProps = buildProps({
    */
   labelWidth: {
     type: [String, Number],
-    default: '',
   },
 } as const)
 
diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts
index dcc31c8917..4eec081cbb 100644
--- a/packages/components/descriptions/src/descriptions-cell.ts
+++ b/packages/components/descriptions/src/descriptions-cell.ts
@@ -54,7 +54,7 @@ export default defineComponent({
     const labelClassName = item.labelClassName
     const width =
       this.type === 'label'
-        ? item.labelWidth || this.descriptions.labelWidth || item.width
+        ? (item.labelWidth ?? this.descriptions.labelWidth ?? item.width)
         : item.width
 
     const style = {
@@ -109,7 +109,7 @@ export default defineComponent({
       default: {
         const label = renderLabel()
         const labelStyle: Record<string, any> = {}
-        const width = addUnit(item.labelWidth || this.descriptions.labelWidth)
+        const width = addUnit(item.labelWidth ?? this.descriptions.labelWidth)
         if (width) {
           labelStyle.width = width
           labelStyle.display = 'inline-block'
diff --git a/packages/components/dialog/src/use-dialog.ts b/packages/components/dialog/src/use-dialog.ts
index 0b53272ab6..84a96edf28 100644
--- a/packages/components/dialog/src/use-dialog.ts
+++ b/packages/components/dialog/src/use-dialog.ts
@@ -62,8 +62,9 @@ export const useDialog = (
       if (props.top) {
         style[`${varPrefix}-margin-top`] = props.top
       }
-      if (props.width) {
-        style[`${varPrefix}-width`] = addUnit(props.width)
+      const width = addUnit(props.width)
+      if (width) {
+        style[`${varPrefix}-width`] = width
       }
     }
     return style
diff --git a/packages/components/form/src/form-item.ts b/packages/components/form/src/form-item.ts
index fd41d42a36..9985a18ae4 100644
--- a/packages/components/form/src/form-item.ts
+++ b/packages/components/form/src/form-item.ts
@@ -25,7 +25,6 @@ export const formItemProps = buildProps({
    */
   labelWidth: {
     type: [String, Number],
-    default: '',
   },
   /**
    * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. The default is extend from `form label-position`.
diff --git a/packages/components/form/src/form-item.vue b/packages/components/form/src/form-item.vue
index b32c2e1c2d..80e170f2e6 100644
--- a/packages/components/form/src/form-item.vue
+++ b/packages/components/form/src/form-item.vue
@@ -109,9 +109,8 @@ const labelStyle = computed<CSSProperties>(() => {
     return {}
   }
 
-  const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || '')
-  if (labelWidth) return { width: labelWidth }
-  return {}
+  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)
+  return { width: labelWidth }
 })
 
 const contentStyle = computed<CSSProperties>(() => {
@@ -121,7 +120,7 @@ const contentStyle = computed<CSSProperties>(() => {
   if (!props.label && !props.labelWidth && isNested) {
     return {}
   }
-  const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || '')
+  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)
   if (!props.label && !slots.label) {
     return { marginLeft: labelWidth }
   }
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index cea0261b5a..073525c59b 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { addUnit, isUndefined } from '@element-plus/utils'
+import { addUnit } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { iconProps } from './icon'
 
@@ -21,10 +21,11 @@ const ns = useNamespace('icon')
 
 const style = computed<CSSProperties>(() => {
   const { size, color } = props
-  if (!size && !color) return {}
+  const fontSize = addUnit(size)
+  if (!fontSize && !color) return {}
 
   return {
-    fontSize: isUndefined(size) ? undefined : addUnit(size),
+    fontSize,
     '--color': color,
   }
 })
diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue
index bf6ddf18dd..231227babb 100644
--- a/packages/components/scrollbar/src/scrollbar.vue
+++ b/packages/components/scrollbar/src/scrollbar.vue
@@ -80,8 +80,10 @@ const barRef = ref<BarInstance>()
 
 const wrapStyle = computed<StyleValue>(() => {
   const style: CSSProperties = {}
-  if (props.height) style.height = addUnit(props.height)
-  if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)
+  const height = addUnit(props.height)
+  const maxHeight = addUnit(props.maxHeight)
+  if (height) style.height = height
+  if (maxHeight) style.maxHeight = maxHeight
   return [props.wrapStyle, style]
 })
 
diff --git a/packages/utils/__tests__/dom/style.test.ts b/packages/utils/__tests__/dom/style.test.ts
index 400ab88957..724d07bbd1 100644
--- a/packages/utils/__tests__/dom/style.test.ts
+++ b/packages/utils/__tests__/dom/style.test.ts
@@ -1,5 +1,9 @@
-import { describe, expect, it } from 'vitest'
-import { addClass, hasClass, removeClass } from '../..'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { addClass, addUnit, debugWarn, hasClass, removeClass } from '../..'
+
+vi.mock('@element-plus/utils/error', () => ({
+  debugWarn: vi.fn(),
+}))
 
 const getClass = (el: Element) => {
   if (!el) return ''
@@ -7,6 +11,10 @@ const getClass = (el: Element) => {
 }
 
 describe('dom style', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
   describe('hasClass', () => {
     it('Judge whether a Element has a class', () => {
       const div = document.createElement('div')
@@ -179,4 +187,46 @@ describe('dom style', () => {
       expect(getClass(path)).toEqual('')
     })
   })
+
+  describe('addUnit', () => {
+    it('should return empty string when value is undefined or empty string', () => {
+      expect(addUnit()).toBe('')
+      expect(addUnit('')).toBe('')
+      expect(addUnit(undefined)).toBe('')
+    })
+
+    it('should append default unit to number', () => {
+      expect(addUnit(10)).toBe('10px')
+      expect(addUnit(0)).toBe('0px')
+      expect(addUnit(-5)).toBe('-5px')
+    })
+
+    it('should append custom unit to number', () => {
+      expect(addUnit(10, 'em')).toBe('10em')
+      expect(addUnit(5, '%')).toBe('5%')
+    })
+
+    it('should append default unit to string number', () => {
+      expect(addUnit('10')).toBe('10px')
+      expect(addUnit('0')).toBe('0px')
+      expect(addUnit('-5')).toBe('-5px')
+    })
+
+    it('should append custom unit to string number', () => {
+      expect(addUnit('10', 'em')).toBe('10em')
+      expect(addUnit('5', '%')).toBe('5%')
+    })
+
+    it('should return string value as is if not a number', () => {
+      expect(addUnit('10px')).toBe('10px')
+      expect(addUnit('auto')).toBe('auto')
+      expect(addUnit('inherit')).toBe('inherit')
+      expect(addUnit('50%')).toBe('50%')
+    })
+
+    it('should warn if value is not string or number', () => {
+      addUnit({} as any)
+      expect(debugWarn).toHaveBeenCalled()
+    })
+  })
 })
diff --git a/packages/utils/dom/style.ts b/packages/utils/dom/style.ts
index 935a4195d2..7a1f1b4541 100644
--- a/packages/utils/dom/style.ts
+++ b/packages/utils/dom/style.ts
@@ -76,7 +76,7 @@ export const removeStyle = (
 }
 
 export function addUnit(value?: string | number, defaultUnit = 'px') {
-  if (!value) return ''
+  if (!value && value !== 0) return ''
   if (isNumber(value) || isStringNumber(value)) {
     return `${value}${defaultUnit}`
   } else if (isString(value)) {