diff --git a/src/components/AreaSelector/AreaSelector.stories.tsx b/src/components/AreaSelector/AreaSelector.stories.tsx
index 3ca4287..7399ee5 100644
--- a/src/components/AreaSelector/AreaSelector.stories.tsx
+++ b/src/components/AreaSelector/AreaSelector.stories.tsx
@@ -2,12 +2,14 @@ import { useState } from 'react';
 import { AreaSelector } from 'src/components/AreaSelector';
 import { CustomAreaRenderer, IArea } from 'src/types';
 import type { Story } from '@ladle/react';
+import { IPropUnit } from './types';
 
 export const AreaSelectExample: Story<{
     maxAreas: number;
     debug: boolean;
     customRenderExampleText: string;
-}> = ({ maxAreas, debug, customRenderExampleText }) => {
+    unit: IPropUnit;
+}> = ({ maxAreas, debug, customRenderExampleText, unit }) => {
     const [areas, setAreas] = useState<IArea[]>([]);
     const onChangeHandler = (areas: IArea[]) => {
         setAreas(areas);
@@ -38,8 +40,9 @@ export const AreaSelectExample: Story<{
                 opacity: '0.5'
             }}
             customAreaRenderer={customRender}
+            unit={unit}
         >
-            <img src='logo512.png' />
+            <img src="logo512.png" />
         </AreaSelector>
     );
 };
@@ -49,3 +52,10 @@ AreaSelectExample.args = {
     debug: true,
     customRenderExampleText: 'test'
 };
+AreaSelectExample.argTypes = {
+    unit: {
+        options: ['pixel', 'percentage'],
+        control: { type: 'select' },
+        defaultValue: 'pixel'
+    }
+};
diff --git a/src/components/AreaSelector/AreaSelector.tsx b/src/components/AreaSelector/AreaSelector.tsx
index 7d63b9f..f9ada46 100644
--- a/src/components/AreaSelector/AreaSelector.tsx
+++ b/src/components/AreaSelector/AreaSelector.tsx
@@ -408,6 +408,7 @@ export const AreaSelector: FunctionComponent<IAreaSelectorProps> = ({
                 boxSizing: 'border-box',
                 maxWidth: '100%',
                 touchAction: 'none',
+                lineHeight: 0,
                 ...wrapperStyle
             }}
         >