diff --git a/src/common/time-line/TimeLine.vue b/src/common/time-line/TimeLine.vue
index 810d8aad..fc10e293 100644
--- a/src/common/time-line/TimeLine.vue
+++ b/src/common/time-line/TimeLine.vue
@@ -50,6 +50,10 @@ export default class SmTimeLine extends Mixins(Theme) {
   @Prop({ default: true }) loop: boolean;
   @Prop({ default: 3000 }) playInterval: string | number;
   @Prop({ default: 0 }) currentIndex: number;
+  @Prop({ default: 'auto' }) left: string | number;
+  @Prop({ default: 'auto' }) right: string | number;
+  @Prop({ default: 'auto' }) top: string | number;
+  @Prop({ default: 'auto' }) bottom: string | number;
   @Prop({
     default() {
       return [];
@@ -168,9 +172,10 @@ export default class SmTimeLine extends Mixins(Theme) {
             ...(this.emphasis || {})
           },
           padding: 0,
-          left: 0,
-          right: 0,
-          top: 'middle'
+          left: this.left,
+          right: this.right,
+          top: this.top,
+          bottom: this.bottom
         },
         tooltip: {
           position: function(point, params, dom, rect, size) {
diff --git a/src/common/time-line/__tests__/TimeLine.spec.js b/src/common/time-line/__tests__/TimeLine.spec.js
index 21179b37..f215eb59 100644
--- a/src/common/time-line/__tests__/TimeLine.spec.js
+++ b/src/common/time-line/__tests__/TimeLine.spec.js
@@ -152,4 +152,17 @@ describe('TimeLine.vue', () => {
     });
     wrapper.vm.setPlayState(true);
   });
+
+  it('render margin', async () => {
+    wrapper = mount(SmTimeLine, {
+      propsData: {
+        data: ['3月15号数据', '3月16号数据', '3月17号数据'],
+        left: 20,
+        right: 20,
+        top: 20,
+        bottom: 20
+      }
+    });
+    expect(wrapper.vm.options.baseOption.timeline.left).toBe(20);
+  });
 });