diff --git a/src/platform/core/steps/step-body/step-body.component.html b/src/platform/core/steps/step-body/step-body.component.html
index 48fe9b3e96..e2a84e0062 100644
--- a/src/platform/core/steps/step-body/step-body.component.html
+++ b/src/platform/core/steps/step-body/step-body.component.html
@@ -1,15 +1,15 @@
 <div layout="row" flex>
   <ng-content></ng-content>
   <div flex>
-    <div [tdToggle]="!active">
-      <div class="td-step-content">
+    <div class="td-step-content-wrapper" [tdToggle]="!active">
+      <div #contentRef [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
         <ng-content select="[td-step-body-content]"></ng-content>
       </div>
-      <div layout="row" class="td-step-actions">
+      <div #actionsRef layout="row" [class.td-step-actions]="actionsRef.children.length || actionsRef.textContent.trim()">
         <ng-content select="[td-step-body-actions]"></ng-content>
       </div>
     </div>
-    <div [tdToggle]="active || !isComplete()" class="td-step-summary">
+    <div #summaryRef [tdToggle]="active || !isComplete()" [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
       <ng-content select="[td-step-body-summary]"></ng-content>
     </div>
   </div>
diff --git a/src/platform/core/steps/step-body/step-body.component.scss b/src/platform/core/steps/step-body/step-body.component.scss
index cdda341e40..9d42d4c902 100644
--- a/src/platform/core/steps/step-body/step-body.component.scss
+++ b/src/platform/core/steps/step-body/step-body.component.scss
@@ -1,15 +1,7 @@
 @import '../../styles/variables';
-@import '../../styles/default-theme';
 
 .td-step-content,
 .td-step-summary,
 .td-step-actions {
-  padding-top: $padding;
-  padding-left: $padding;
-  display: block;
+  margin: $margin;
 }
-
-.td-step-summary,
-.td-step-actions {
-  margin-bottom: $margin;
-}
\ No newline at end of file