diff --git a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
index fbbbbb255c..ba4ab15363 100644
--- a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
+++ b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
@@ -1,28 +1,30 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
-  <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
-</a>
+<div class="space-children-mr my-1">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
+    <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
     <i class="fa fa-eye-slash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-private" | translate}}</span>
-</a>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
     <i class="fa fa-eye"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-public" | translate}}</span>
-</a>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
-  <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
+    <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
-  <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
+    <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
-  <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
+    <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-danger my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-danger delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
     <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.delete" | translate}}</span>
-</a>
+  </a>
+</div>
 
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
index 4d7266514c..7f19ef3c2e 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
@@ -1,7 +1,8 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
+<div class="space-children-mr">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
     <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.delete" | translate}}</span>
-</a>
-
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
+  </a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
     <i class="fa fa-hand-point-left"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.send-back" | translate}}</span>
-</a>
+  </a>
+</div>
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 6eceb696bd..6e4437e0e0 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -34,7 +34,7 @@
                           [title]="'collection.page.news'">
                   </ds-comcol-page-content>
                 </header>
-                <div class="pl-2">
+                <div class="pl-2 space-children-mr">
                   <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
                 </div>
               </div>
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
index 4abb149498..c33675a752 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -5,11 +5,11 @@
                 <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dso.name } }}</p>
                 <div class="form-group row">
-                  <div class="col text-right">
+                  <div class="col text-right space-children-mr">
                     <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
-                    <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                       <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                       <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                     </button>
diff --git a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index 9818813e32..ffd8f71343 100644
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
   <label>{{ 'collection.edit.template.label' | translate}}</label>
-  <div class="button-row">
+  <div class="button-row space-children-mr">
     <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
       <i class="fas fa-plus"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
index 7dc93e8adf..75a9b22a12 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -1,5 +1,5 @@
 <div *ngVar="(contentSource$ |async) as contentSource">
-    <div class="container-fluid" *ngIf="shouldShow">
+    <div class="container-fluid space-children-mr" *ngIf="shouldShow">
         <h4>{{ 'collection.source.controls.head' | translate }}</h4>
         <div>
             <span class="font-weight-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
@@ -51,4 +51,4 @@
 
 
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index b67ee9a1bd..b478456049 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="d-inline-block float-right">
+    <div class="d-inline-block float-right space-children-mr">
         <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                 [disabled]="!(hasChanges() | async)"
                 (click)="discard()"><i
@@ -43,7 +43,7 @@
 <div class="container mt-2" *ngIf="(contentSource?.harvestType !== harvestTypeNone)">
     <div class="row">
         <div class="col-12">
-            <div class="d-inline-block float-right ml-1">
+            <div class="d-inline-block float-right ml-1 space-children-mr">
                 <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                         [disabled]="!(hasChanges() | async)"
                         (click)="discard()"><i
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index 27420e95b3..fa2408d298 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -20,7 +20,7 @@
             [title]="'community.page.news'">
           </ds-comcol-page-content>
         </header>
-        <div class="pl-2">
+        <div class="pl-2 space-children-mr">
           <ds-dso-page-edit-button *ngIf="isCommunityAdmin$ | async" [pageRoute]="communityPageRoute$ | async" [dso]="communityPayload" [tooltipMsg]="'community.page.edit'"></ds-dso-page-edit-button>
         </div>
       </div>
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
index 658f3da436..751d001c51 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -5,11 +5,11 @@
                 <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
                 <div class="form-group row">
-                    <div class="col text-right">
+                    <div class="col text-right space-children-mr">
                         <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                             <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
                         </button>
-                        <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                             <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'community.delete.processing' | translate}}</span>
                             <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}</span>
                         </button>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index 5847be7dd2..6e73935672 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'journalissue.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journalissue.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index a0a25766ef..5d4d8d06ce 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'journalvolume.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journalvolume.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index af3ac85959..d51c55e5d6 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'journal.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journal.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index c9ea8fb549..4315d2a91c 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'orgunit.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['organization.legalName'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'orgunit.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 5c2fd227fd..8cf6117121 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'person.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="[object?.firstMetadata('person.familyName'), object?.firstMetadata('person.givenName')]" [separator]="', '"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'person.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 8f2ff6adcd..7960631f3d 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -2,7 +2,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'project.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'project.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index 28cc4277dc..9458df2249 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -25,7 +25,7 @@
                     </div>
                     <div class="button-row bottom">
                       <div class="text-right">
-                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary mr-1"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
+                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
                       </div>
                     </div>
                 </div>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 315498378a..0eda2661ff 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -1,16 +1,16 @@
 <div class="item-bitstreams" *ngVar="(bundles$ | async) as bundles">
-  <div class="button-row top d-flex mt-2">
+  <div class="button-row top d-flex mt-2 space-children-mr">
     <button class="mr-auto btn btn-success"
             [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
             class="fas fa-upload"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
     </button>
-    <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
+    <button class="btn btn-warning" *ngIf="isReinstatable() | async"
             (click)="reinstate()"><i
             class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
     </button>
-    <button class="btn btn-primary mr-1" [disabled]="!(hasChanges() | async) || submitting"
+    <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || submitting"
             (click)="submit()"><i
             class="fas fa-save"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
@@ -47,7 +47,7 @@
   <ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading>
 
   <div class="button-row bottom">
-    <div class="mt-4 float-right">
+    <div class="mt-4 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable() | async"
               (click)="reinstate()"><i
         class="fas fa-undo-alt"></i>
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
index df50e13b48..7b1953d892 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -86,12 +86,14 @@
 
             </ng-container>
 
-            <button (click)="performAction()"
-                    class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
-            </button>
-            <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
+            <div class="space-children-mr">
+              <button (click)="performAction()"
+                      class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
+              </button>
+              <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
                 {{cancelMessage| translate}}
-            </button>
+              </button>
+            </div>
 
         </div>
     </div>
diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
index 70cd2aaa39..81dd39c238 100644
--- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -1,5 +1,5 @@
 <div class="item-metadata">
-  <div class="button-row top d-flex mb-2">
+  <div class="button-row top d-flex mb-2 space-children-mr">
     <button class="mr-auto btn btn-success"
             (click)="add()"><i
       class="fas fa-plus"></i>
@@ -50,12 +50,12 @@
     <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
   </div>
   <div class="button-row bottom">
-    <div class="mt-2 float-right">
+    <div class="mt-2 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable() | async"
               (click)="reinstate()"><i
         class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
       </button>
-      <button class="btn btn-primary mr-0" [disabled]="!(hasChanges() | async)"
+      <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
               (click)="submit()"><i
         class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
       </button>
diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
index 46ce1a6f4b..96f785e1a1 100644
--- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
@@ -1,6 +1,6 @@
 .button-row {
     .btn {
-        margin-right: calc(0.5 * var(--bs-spacer));
+        margin-right: var(--ds-gap);
 
         &:last-child {
             margin-right: 0;
diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html
index f68cfb0685..8cb8d1c1c4 100644
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -31,15 +31,15 @@
             </div>
 
           <div class="button-row bottom">
-            <div class="float-right">
+            <div class="float-right space-children-mr">
               <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
               </button>
-              <button class="btn btn-primary mr-0" [disabled]="!canMove" (click)="moveToCollection()">
+              <button class="btn btn-primary" [disabled]="!canMove" (click)="moveToCollection()">
               <span *ngIf="!processing">
                 <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
               </span>
-                <span *ngIf="processing">
+              <span *ngIf="processing">
                 <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
               </span>
               </button>
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
index 4a53445a6d..38a784c7ea 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
@@ -1,7 +1,7 @@
 <div class="item-relationships">
   <ng-container *ngVar="entityType$ | async as entityType">
     <ng-container *ngIf="entityType">
-      <div class="button-row top d-flex">
+      <div class="button-row top d-flex space-children-mr">
         <button class="btn btn-danger ml-auto" *ngIf="!(isReinstatable() | async)"
                 [disabled]="!(hasChanges() | async)"
                 (click)="discard()"><i
@@ -35,7 +35,7 @@
         <ds-loading *ngIf="!relationshipTypes"></ds-loading>
       </ng-container>
       <div class="button-row bottom">
-        <div class="float-right">
+        <div class="float-right space-children-mr ml-gap">
           <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
                   [disabled]="!(hasChanges() | async)"
                   (click)="discard()"><i
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss
index 91c1423ba3..7a5a7f73f6 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss
@@ -1,6 +1,6 @@
 .button-row {
   .btn {
-    margin-right: calc(0.5 * var(--bs-spacer));
+    margin-right: var(--ds-gap);
 
     &:last-child {
       margin-right: 0;
diff --git a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
index 73793ede05..b5757d1859 100644
--- a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
+++ b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
@@ -4,12 +4,13 @@
             <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
             <p>{{descriptionMessage | translate}}</p>
             <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
+          <div class="space-children-mr">
             <button (click)="performAction()" class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
             </button>
             <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
-                {{cancelMessage| translate}}
+              {{cancelMessage| translate}}
             </button>
-
+          </div>
         </div>
     </div>
 
diff --git a/src/app/item-page/full/full-item-page.component.html b/src/app/item-page/full/full-item-page.component.html
index e71dd92f96..7cc8ff92c4 100644
--- a/src/app/item-page/full/full-item-page.component.html
+++ b/src/app/item-page/full/full-item-page.component.html
@@ -7,7 +7,7 @@
       <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
         <div class="d-flex flex-row">
           <ds-item-page-title-field class="mr-auto" [item]="item"></ds-item-page-title-field>
-          <div class="pl-2">
+          <div class="pl-2 space-children-mr">
             <ds-dso-page-edit-button [pageRoute]="itemPageRoute$ | async" [dso]="item"
                                      [tooltipMsg]="'item.page.edit'"></ds-dso-page-edit-button>
           </div>
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index bace9fcd0a..96454914cd 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -11,7 +11,7 @@
   <h2 class="item-page-title-field mr-auto">
     {{'publication.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'publication.page.edit'"></ds-dso-page-edit-button>
   </div>
 </div>
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 04794717f1..9525a0c0cc 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -11,7 +11,7 @@
   <h2 class="item-page-title-field mr-auto">
     <ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
   </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
     <ds-dso-page-version-button (newVersionEvent)="onCreateNewVersion()" [dso]="object"
                                 [tooltipMsgCreate]="'item.page.version.create'"
                                 [tooltipMsgHasDraft]="'item.page.version.hasDraft'"></ds-dso-page-version-button>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index f95cd98c65..7c5346b0ba 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -68,29 +68,27 @@
     </ng-container>
 </div>
 <div class="modal-footer">
-    <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
-    <div class="buttons-container">
+  <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
+  <div class="d-flex float-right space-children-mr">
     <div class="close-button">
         <button type="button" [disabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
             {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
     </div>
-     <div *ngIf="isEditRelationship" class="button-row bottom">
-        <div class="float-right">
-          <button class="btn btn-danger discard"
-                  [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
-                  (click)="discardEv()">
-                  <i class="fas fa-times"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-          </button>
-          <button class="btn btn-primary submit"
-                [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
-                  (click)="submitEv()">
-                  <span *ngIf="isPending" class="spinner-border spinner-border-sm" role="status"
-                                  aria-hidden="true"></span>
-                  <i class="fas fa-save"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-          </button>
-        </div>
-      </div>
-    </div>
+    <ng-container *ngIf="isEditRelationship">
+      <button class="btn btn-danger discard"
+              [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+              (click)="discardEv()">
+              <i class="fas fa-times"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+      </button>
+      <button class="btn btn-primary submit"
+            [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+              (click)="submitEv()">
+              <span *ngIf="isPending" class="spinner-border spinner-border-sm" role="status"
+                              aria-hidden="true"></span>
+              <i class="fas fa-save"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+      </button>
+    </ng-container>
+  </div>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss
index f611746832..099422801a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss
@@ -13,10 +13,3 @@
     vertical-align: middle;
   }
 }
-
-.buttons-container{
-  display: flex;
-  .close-button{
-    margin-right: 5px;
-  }
-}
\ No newline at end of file
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
index d8e474ee08..9ba204df78 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -201,9 +201,6 @@ describe('DsDynamicLookupRelationModalComponent', () => {
 
 
   describe('when initialized and is relationship show the list of buttons', () => {
-    it('should show buttons container', () => {
-      expect(debugElement.query(By.css('.button-row'))).toBeTruthy();
-    });
     it('submit button should be disabled', () => {
       expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
     });
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 16ced852b1..0410cfb5dd 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -57,7 +57,7 @@
     <div *ngIf="displaySubmit || displayCancel">
       <hr>
       <div class="form-group row">
-        <div class="col text-right">
+        <div class="col text-right space-children-mr">
           <ng-content select="[before]"></ng-content>
             <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
               <i class="fa fa-times"></i> {{cancelLabel | translate}}
diff --git a/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html b/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html
index e49e257339..a083679108 100644
--- a/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html
+++ b/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html
@@ -19,14 +19,14 @@
 <!--      (keyup.enter)="$event.preventDefault(); $event.stopImmediatePropagation()"-->
     </div>
   </div>
-  <div class="modal-footer">
-      <button class="btn btn-outline-secondary btn-sm"
+  <div class="modal-footer space-children-mr">
+      <button class="btn btn-outline-secondary btn-sm ml-0"
               type="button"
               (click)="onModalClose()"
               title="{{'item.version.create.modal.button.cancel.tooltip' | translate}}">
         <i class="fas fa-times fa-fw"></i> {{'item.version.create.modal.button.cancel' | translate}}
       </button>
-      <button class="btn btn-success btn-sm"
+      <button class="btn btn-success btn-sm ml-0"
               type="submit"
               (click)="onModalSubmit()"
               title="{{'item.version.create.modal.button.confirm.tooltip' | translate}}">
diff --git a/src/app/shared/item/item-versions/item-versions.component.html b/src/app/shared/item/item-versions/item-versions.component.html
index 432b10e8f1..176c1f0cde 100644
--- a/src/app/shared/item/item-versions/item-versions.component.html
+++ b/src/app/shared/item/item-versions/item-versions.component.html
@@ -53,7 +53,7 @@
 
                   <div class="right-column">
 
-                    <div class="btn-group edit-field" *ngIf="displayActions">
+                    <div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
                       <!--EDIT WORKSPACE ITEM-->
                       <button class="btn btn-outline-primary btn-sm version-row-element-edit"
                               *ngIf="workspaceId$ | async"
@@ -103,7 +103,7 @@
                 </ng-template>
               </div>
 
-              <div class="float-right btn-group edit-field" *ngIf="displayActions">
+              <div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
                 <!--DISCARD EDIT -->
                 <ng-container *ngIf="(canEditVersion$(version) | async) && isThisBeingEdited(version)">
                   <button class="btn btn-sm"
diff --git a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html
index 7454a80873..4ad6665cf8 100644
--- a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(actionRD$ | async)?.payload as workflowAction">
-  <div class="mt-1 mb-3">
+  <div class="mt-1 mb-3 space-children-mr">
     <ds-claimed-task-actions-loader *ngFor="let option of workflowAction?.options"
                                     [option]="option"
                                     [object]="object"
diff --git a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss
index e69de29bb2..eb27386fb9 100644
--- a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss
+++ b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss
@@ -0,0 +1,3 @@
+ds-claimed-task-actions-loader:empty {
+  margin: 0 !important;  // make sure actions that don't load don't cause margins to stack
+}
diff --git a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
index a25343567e..a43c9f8d17 100644
--- a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
+++ b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
@@ -1,19 +1,21 @@
-<a class="btn btn-primary mt-1 mb-3"
-   id="{{'edit_' + object.id}}"
-   ngbTooltip="{{'submission.workflow.generic.edit-help' | translate}}"
-   [routerLink]="['/workspaceitems/' + object.id + '/edit']"
-   role="button">
-  <i class="fa fa-edit"></i> {{'submission.workflow.generic.edit' | translate}}
-</a>
+<div class="space-children-mr">
+  <a class="btn btn-primary mt-1 mb-3"
+     id="{{'edit_' + object.id}}"
+     ngbTooltip="{{'submission.workflow.generic.edit-help' | translate}}"
+     [routerLink]="['/workspaceitems/' + object.id + '/edit']"
+     role="button">
+    <i class="fa fa-edit"></i> {{'submission.workflow.generic.edit' | translate}}
+  </a>
 
-<button type="button"
-        id="{{'delete_' + object.id}}"
-        class="btn btn-danger mt-1 mb-3"
-        ngbTooltip="{{'submission.workflow.generic.delete-help' | translate}}"
-        (click)="$event.preventDefault();confirmDiscard(content)">
-  <span *ngIf="(processingDelete$ | async)"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
-  <span *ngIf="!(processingDelete$ | async)"><i class="fa fa-trash"></i> {{'submission.workflow.generic.delete' | translate}}</span>
-</button>
+  <button type="button"
+          id="{{'delete_' + object.id}}"
+          class="btn btn-danger mt-1 mb-3"
+          ngbTooltip="{{'submission.workflow.generic.delete-help' | translate}}"
+          (click)="$event.preventDefault();confirmDiscard(content)">
+    <span *ngIf="(processingDelete$ | async)"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
+    <span *ngIf="!(processingDelete$ | async)"><i class="fa fa-trash"></i> {{'submission.workflow.generic.delete' | translate}}</span>
+  </button>
+</div>
 
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index 27ebcd9643..f1359c004f 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -29,13 +29,15 @@
   </div>
   <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
   <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
-  <div *ngVar="(selectedIds$ | async) as selectedIds">
-    <button class="btn collection-confirm float-right"
+  <div class="space-children-mr float-right" *ngVar="(selectedIds$ | async) as selectedIds">
+    <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
+      <i class="fas fa-times"></i> {{cancelButton | translate}}
+    </button>
+    <button class="btn collection-confirm"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
             [disabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
       <i class="fas fa-trash"></i> {{confirmButton | translate}}
     </button>
-    <button class="btn btn-outline-secondary collection-cancel float-right mr-1" (click)="onCancel()"><i class="fas fa-times"></i> {{cancelButton | translate}}</button>
   </div>
 </ng-container>
diff --git a/src/app/shared/resource-policies/resource-policies.component.html b/src/app/shared/resource-policies/resource-policies.component.html
index b06946ad25..c4d640a97d 100644
--- a/src/app/shared/resource-policies/resource-policies.component.html
+++ b/src/app/shared/resource-policies/resource-policies.component.html
@@ -5,8 +5,8 @@
         <th colspan="10">
           <div class="d-flex justify-content-between align-items-center m-0">
             {{ 'resource-policies.table.headers.title.for.' + resourceType | translate }} {{resourceUUID}}
-            <div>
-              <button class="btn btn-danger float-right ml-1"
+            <div class="space-children-mr">
+              <button class="btn btn-danger"
                       [disabled]="(!(canDelete() | async)) || (isProcessingDelete() | async)"
                       [title]="'resource-policies.delete.btn.title' | translate"
                       (click)="deleteSelectedResourcePolicies()">
@@ -18,7 +18,7 @@
                   {{'resource-policies.delete.btn' | translate}}
                 </span>
               </button>
-              <button class="btn btn-success float-right"
+              <button class="btn btn-success"
                       [disabled]="(isProcessingDelete() | async)"
                       [title]="'resource-policies.add.for.' + resourceType | translate"
                       (click)="redirectToResourcePolicyCreatePage()">
diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html
index db4617f0ed..7013c55667 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -22,7 +22,7 @@
         <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
       </div>
     </div>
-    <div class="ml-2">
+    <div class="ml-2 space-children-mr">
       <button type="button"
               class="btn btn-secondary"
               id="save"
@@ -61,7 +61,7 @@
   <div class="modal-body">
     <p>{{'submission.general.discard.confirm.info' | translate}}</p>
   </div>
-  <div class="modal-footer">
+  <div class="modal-footer space-children-mr">
     <button type="button" id="discard_cancel" class="btn btn-secondary" (click)="c('cancel')">{{'submission.general.discard.confirm.cancel' | translate}}</button>
     <button type="button" id="discard_submit" class="btn btn-danger" (click)="c('ok')">{{'submission.general.discard.confirm.submit' | translate}}</button>
   </div>
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 23889648f1..3e122cde78 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -12,7 +12,6 @@ import { RemoteData } from '../core/data/remote-data';
   selector: 'ds-thumbnail',
   styleUrls: ['./thumbnail.component.scss'],
   templateUrl: './thumbnail.component.html',
-  preserveWhitespaces: false,
 })
 export class ThumbnailComponent implements OnChanges {
   /**
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 66e0e87f93..40180d8342 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -85,4 +85,6 @@
   --ds-slider-handle-width: 18px;
 
   --ds-search-form-scope-max-width: 150px;
+
+  --ds-gap: 0.25rem;
 }
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index e337539c15..4afd2eb05e 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -92,3 +92,19 @@ ngb-modal-backdrop {
   hyphens: auto;
 
 }
+
+/* Replicate default spacing look ~ preserveWhitespace=true
+   To be used e.g. on a div containing buttons that should have a bit of spacing in between
+ */
+.space-children-mr > :not(:last-child) {
+  margin-right: var(--ds-gap);
+}
+
+/* Complement .space-children-mr when spaced elements are not on the same level */
+.mr-gap {
+  margin-right: var(--ds-gap);
+}
+
+.ml-gap {
+  margin-left: var(--ds-gap);
+}