diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap
index a53221b631..cd9cd69dbd 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap
@@ -326,7 +326,7 @@ Array [
 
 exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
 Array [
-  <span
+  <div
     class="ant-typography"
   >
     This is an editable text.
@@ -358,9 +358,8 @@ Array [
         </svg>
       </span>
     </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
     class="ant-typography"
   >
     This is a copyable text.
@@ -392,9 +391,8 @@ Array [
         </svg>
       </span>
     </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
     class="ant-typography"
   >
     Replace copy text.
@@ -426,9 +424,8 @@ Array [
         </svg>
       </span>
     </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
     class="ant-typography"
   >
     Custom icon.
@@ -460,7 +457,7 @@ Array [
         </svg>
       </span>
     </div>
-  </span>,
+  </div>,
   <div
     class="ant-typography"
   >
diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md
index 790ec9a644..9b8b0c31d7 100644
--- a/components/typography/demo/interactive.md
+++ b/components/typography/demo/interactive.md
@@ -17,7 +17,7 @@ Provide additional interactive capacity of editable and copyable.
 import { Typography } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-const { Text, Paragraph } = Typography;
+const { Paragraph } = Typography;
 
 class Demo extends React.Component {
   state = {
@@ -32,13 +32,10 @@ class Demo extends React.Component {
   render() {
     return (
       <>
-        <Text editable={{ onChange: this.onChange }}>{this.state.str}</Text>
-        <br />
-        <Text copyable>This is a copyable text.</Text>
-        <br />
-        <Text copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Text>
-        <br />
-        <Text copyable={{ icon: <SmileOutlined /> }}>Custom icon.</Text>
+        <Paragraph editable={{ onChange: this.onChange }}>{this.state.str}</Paragraph>
+        <Paragraph copyable>This is a copyable text.</Paragraph>
+        <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
+        <Paragraph copyable={{ icon: <SmileOutlined /> }}>Custom icon.</Paragraph>
         <Paragraph copyable={{ tooltips: ['click here', 'you clicked!!'] }}>
           Replace tooltips text.
         </Paragraph>
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 2841f5282a..435b93e68f 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -159,7 +159,7 @@
       left: -@input-padding-horizontal - 1px;
       margin-top: -@input-padding-vertical-base - 1px;
       // stylelint-disable-next-line function-calc-no-invalid
-      margin-bottom: calc(1em - @input-padding-vertical-base - 2px);
+      margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
     }
 
     &-confirm {