diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 059ac7ebad..30c49ebcfb 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -3539,6 +3539,7 @@ body > .autocomplete-suggestions.text-search-suggestions {
 
 @import "misc/kanban.less";
 
+@import "elements/placement.less";
 @import "elements/site.less";
 @import "elements/modal.less";
 @import "elements/buttons.less";
diff --git a/frontend/less/espo/elements/placement.less b/frontend/less/espo/elements/placement.less
new file mode 100644
index 0000000000..dd4c163944
--- /dev/null
+++ b/frontend/less/espo/elements/placement.less
@@ -0,0 +1,47 @@
+.margin {
+    margin: @table-cell-padding 0;
+}
+
+.margin-top-sm {
+    margin-top: calc(@table-cell-padding / 2);
+}
+
+.margin-top {
+    margin-top: @table-cell-padding;
+}
+
+.margin-top-2x {
+    margin-top: @table-cell-padding * 2;
+}
+
+.margin-bottom-sm {
+    margin-bottom: calc(@table-cell-padding / 2);
+}
+
+.margin-bottom {
+    margin-bottom: @table-cell-padding;
+}
+
+.margin-bottom-sm {
+    margin-bottom: calc(@table-cell-padding / 2);
+}
+
+.margin-bottom-2x {
+    margin-bottom: @table-cell-padding * 2;
+}
+
+.margin-bottom-3x {
+    margin-bottom: @table-cell-padding * 3;
+}
+
+.margin-bottom-4x {
+    margin-bottom: @table-cell-padding * 4;
+}
+
+.margin-bottom.margin {
+    margin-top: 0;
+}
+
+.center-align {
+    text-align: center;
+}