diff --git a/packages/color-alpha/src/index.tsx b/packages/color-alpha/src/index.tsx
index ce702a84d..a54530ef3 100644
--- a/packages/color-alpha/src/index.tsx
+++ b/packages/color-alpha/src/index.tsx
@@ -72,9 +72,9 @@ const Alpha = React.forwardRef<HTMLDivElement, AlphaProps>((props, ref) => {
     borderRadius: radius,
     background: `url(${BACKGROUND_IMG}) left center`,
     backgroundColor: 'var(--alpha-background-color)',
+    ...{ width, height },
     ...style,
     position: 'relative',
-    ...{ width, height },
   } as CSSProperties;
 
   const pointerElement =
diff --git a/packages/color-wheel/README.md b/packages/color-wheel/README.md
index a00f64b6f..2a22c5043 100644
--- a/packages/color-wheel/README.md
+++ b/packages/color-wheel/README.md
@@ -28,7 +28,7 @@ function Demo() {
   return (
     <Fragment>
       <Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
-      <div style={{ width: '100%', height: 34, background: hsvaToHex(hsva) }}></div>
+      <div style={{ width: '100%', height: 34, marginTop: 20, background: hsvaToHex(hsva) }}></div>
     </Fragment>
   );
 }
@@ -75,7 +75,7 @@ function Demo() {
       <Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
       <ShadeSlider
         hsva={hsva}
-        style={{ width: 210 }}
+        style={{ width: 210, marginTop: 20 }}
         onChange={(newShade) => {
           setHsva({ ...hsva, ...newShade });
         }}