diff --git a/src/components/Callout/Callout.Props.ts b/src/components/Callout/Callout.Props.ts
index e3d5b3e96f5f33..9135fea56d796a 100644
--- a/src/components/Callout/Callout.Props.ts
+++ b/src/components/Callout/Callout.Props.ts
@@ -17,7 +17,7 @@ export interface ICalloutProps extends React.Props<Callout>, IPositionProps {
 
   /**
    * The gap space between the target element and the callout.
-   * @default 20
+   * @default 16
    */
   gapSpace?: number;
 
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
index 7aa3ee86344b8a..4c2c0b7c8c6fbb 100644
--- a/src/components/Callout/Callout.tsx
+++ b/src/components/Callout/Callout.tsx
@@ -22,7 +22,7 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     isBeakVisible: true,
     beakStyle: 'ms-Callout-beak',
     beakWidth: 28,
-    gapSpace: 10,
+    gapSpace: 16,
     directionalHint: DirectionalHint.rightCenter
   };
 
diff --git a/src/demo/pages/CalloutPage/examples/Callout.Directional.Example.tsx b/src/demo/pages/CalloutPage/examples/Callout.Directional.Example.tsx
index 3bd29ec19cfa1d..7165a394c1a1f9 100644
--- a/src/demo/pages/CalloutPage/examples/Callout.Directional.Example.tsx
+++ b/src/demo/pages/CalloutPage/examples/Callout.Directional.Example.tsx
@@ -50,8 +50,7 @@ export class CalloutDirectionalExample extends React.Component<any, ICalloutDire
     this.state = {
       isCalloutVisible: false,
       isBeakVisible: true,
-      directionalHint: DirectionalHint.bottomLeftEdge,
-      gapSpace: 10
+      directionalHint: DirectionalHint.bottomLeftEdge
     };
   }
 
@@ -81,8 +80,6 @@ export class CalloutDirectionalExample extends React.Component<any, ICalloutDire
             isBeakVisible={ isBeakVisible }
             onDismiss={ this._onDismiss }
             directionalHint={ directionalHint }
-            beakStyle={ 'ms-Callout-smallbeak' }
-            beakWidth={ 16 }
             >
             <div className='ms-Callout-header'>
               <p className='ms-Callout-title'>