diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 44e288d2e0..c1f0d7e635 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -126,6 +126,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
index 0bffd39ce4..5f14b7569e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
@@ -144,6 +144,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -183,6 +184,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index 52563a1b46..e43dd1665a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -94,6 +94,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
       formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
index d2110026f6..0e012cefe7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
@@ -79,6 +79,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -99,6 +100,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 7a638c70f3..9fa2d1b1a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -211,6 +211,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
     <div class="tb-form-row space-between column-lt-md">
       <div translate>widget-config.show-card-buttons</div>
       <mat-chip-listbox multiple formControlName="cardButtons">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
index 75c93bc852..dfdc9e8eb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
@@ -108,6 +108,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -159,6 +160,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 7854a9f3b3..0dd9a2ebd9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -208,6 +208,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
index fca3bd2502..08e7003b65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
@@ -147,6 +147,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -198,6 +199,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 72598a4cdf..814f9f08d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
     <ng-container [ngSwitch]="layout">
-    <ng-template [ngSwitchCase]="valueCardLayout.square">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.vertical">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.centered">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <div class="tb-value-card-icon-row">
-        <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+      <ng-template [ngSwitchCase]="valueCardLayout.square">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </div>
-      <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.simplified">
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
-                                 layout === valueCardLayout.horizontal_reversed ? layout : ''">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <div fxFlex></div>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-  </ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.vertical">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.centered">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <div class="tb-value-card-icon-row">
+          <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+          <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        </div>
+        <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.simplified">
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
+                                   layout === valueCardLayout.horizontal_reversed ? layout : ''">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <div fxFlex></div>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+    </ng-container>
   </div>
 </div>
 <ng-template #iconWithLabelTpl>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
index ed361c1e76..96ec634362 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
@@ -38,6 +38,7 @@ import {
   getSingleTsValue,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
@@ -48,7 +49,6 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const squareLayoutSize = 160;
-const squareLayoutPadding = 48;
 const horizontalLayoutHeight = 80;
 
 @Component({
@@ -96,6 +96,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   private panelResize$: ResizeObserver;
 
@@ -148,6 +149,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   public ngAfterViewInit() {
@@ -199,8 +201,13 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   private onResize() {
-    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - squareLayoutPadding;
-    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (this.horizontal ? 0 : squareLayoutPadding);
+    const computedStyle = getComputedStyle(this.valueCardPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.valueCardPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     let scale: number;
     if (!this.horizontal) {
       const size = Math.min(panelWidth, panelHeight);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
index df5fc78e9a..2ca299cb6e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
@@ -19,8 +19,10 @@ import {
   BackgroundType,
   ColorSettings,
   constantColor,
-  cssUnit, DateFormatSettings,
-  Font, lastUpdateAgoDateFormat
+  cssUnit,
+  DateFormatSettings,
+  Font,
+  lastUpdateAgoDateFormat
 } from '@shared/models/widget-settings.models';
 
 export enum ValueCardLayout {
@@ -80,6 +82,7 @@ export interface ValueCardWidgetSettings {
   dateFont: Font;
   dateColor: ColorSettings;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSettings => ({
@@ -128,5 +131,6 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
index 391ade6228..95eb4a0ba1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
@@ -20,7 +20,7 @@
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout">
+  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout" [style.padding]="padding">
     <div class="tb-status-widget-icon-container">
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
index 5b59b0210f..d8d5b48ff6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
@@ -21,14 +21,16 @@ import {
   ElementRef,
   OnDestroy,
   OnInit,
-  Renderer2, ViewChild,
+  Renderer2,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models';
 import {
   statusWidgetDefaultSettings,
   StatusWidgetLayout,
-  StatusWidgetSettings, StatusWidgetStateSettings
+  StatusWidgetSettings,
+  StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 import { Observable } from 'rxjs';
 import {
@@ -36,12 +38,12 @@ import {
   ComponentStyle,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
-import { UtilsService } from '@core/services/utils.service';
 import { ValueType } from '@shared/models/constants';
 
 const initialStatusWidgetSize = 147;
@@ -65,6 +67,7 @@ export class StatusWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   overlayInset = '12px';
   borderRadius = '';
@@ -101,9 +104,7 @@ export class StatusWidgetComponent extends
   constructor(protected imagePipe: ImagePipe,
               protected sanitizer: DomSanitizer,
               private renderer: Renderer2,
-              private utils: UtilsService,
-              protected cd: ChangeDetectorRef,
-              private elementRef: ElementRef) {
+              protected cd: ChangeDetectorRef) {
     super(cd);
   }
 
@@ -191,8 +192,13 @@ export class StatusWidgetComponent extends
   }
 
   private onResize() {
-    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width;
-    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height;
+    const computedStyle = getComputedStyle(this.statusWidgetPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.statusWidgetPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     const targetSize = Math.min(panelWidth, panelHeight);
     const scale = targetSize / initialStatusWidgetSize;
     const width = initialStatusWidgetSize;
@@ -220,6 +226,9 @@ export class StatusWidgetComponent extends
     this.showLabel = stateSettings.showLabel && this.layout !== StatusWidgetLayout.icon;
     this.showStatus = stateSettings.showStatus && this.layout !== StatusWidgetLayout.icon;
     this.icon = stateSettings.icon;
+    this.padding = stateSettings.backgroundDisabled.overlay.enabled || stateSettings.background.overlay.enabled
+      ? undefined
+      : this.settings.padding;
 
     const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
     const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
index 2ef999c6f2..4dbea591f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
@@ -65,6 +65,7 @@ export interface StatusWidgetSettings {
   layout: StatusWidgetLayout;
   onState: StatusWidgetStateSettings;
   offState: StatusWidgetStateSettings;
+  padding: string
 }
 
 export const statusWidgetDefaultSettings: StatusWidgetSettings = {
@@ -200,5 +201,6 @@ export const statusWidgetDefaultSettings: StatusWidgetSettings = {
         blur: 3
       }
     }
-  }
+  },
+  padding: ''
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
index fd9aaca4a6..a8dde3ed4c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-single-switch-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
   <div class="tb-single-switch-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
index 2c15634893..63ed57628b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
@@ -36,6 +36,7 @@ import {
   ComponentStyle,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
@@ -74,6 +75,7 @@ export class SingleSwitchWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
   overlayInset = '12px';
 
   value = false;
@@ -123,6 +125,7 @@ export class SingleSwitchWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.layout = this.settings.layout;
 
@@ -231,11 +234,15 @@ export class SingleSwitchWidgetComponent extends
   }
 
   private onResize() {
-    const height = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height;
+    const widgetBoundingClientRect = this.singleSwitchPanel.nativeElement.getBoundingClientRect();
+    const height = widgetBoundingClientRect.height;
     const switchScale = height / initialSwitchHeight;
     const paddingScale = Math.min(switchScale, 1);
-    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (horizontalLayoutPadding * paddingScale);
-    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (verticalLayoutPadding * paddingScale);
+    const computedStyle = getComputedStyle(this.singleSwitchPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+    const panelWidth = widgetBoundingClientRect.width - ((pLeft + pRight) || horizontalLayoutPadding * paddingScale);
+    const panelHeight = widgetBoundingClientRect.height - ((pTop + pBottom) || verticalLayoutPadding * paddingScale);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
     let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
index 94586c31de..62aae25816 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
@@ -80,6 +80,7 @@ export interface SingleSwitchWidgetSettings {
   offLabelFont: Font;
   offLabelColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
@@ -217,5 +218,6 @@ export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 76f46862a6..5077c93d8e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -93,5 +93,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
index 9693ca22d4..be7794802c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
@@ -110,7 +110,8 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
       dateFont: [settings.dateFont, []],
       dateColor: [settings.dateColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index db6d0371f9..2709266f2f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -123,6 +123,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
index a1a3e951f2..a4a76e5294 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
@@ -102,7 +102,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
       offLabelFont: [settings.offLabelFont, []],
       offLabelColor: [settings.offLabelColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 21b7bc5cf0..892311733c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -78,5 +78,11 @@
         [layout]="statusWidgetSettingsForm.get('layout').value"
         formControlName="offState">
     </tb-status-widget-state-settings>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
index 03da985a0e..1130b58b21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
@@ -73,7 +73,8 @@ export class StatusWidgetSettingsComponent extends WidgetSettingsComponent {
       disabledState: [settings.disabledState, []],
       layout: [settings.layout, []],
       onState: [settings.onState, []],
-      offState: [settings.offState, []]
+      offState: [settings.offState, []],
+      padding: [settings.padding, []]
     });
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index 9265164c52..5271825ccf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -100,5 +100,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
index e6b8880758..2d16a030b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
@@ -91,7 +91,8 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
 
       arrowColor: [settings.arrowColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
index 80ca1960f9..0ec08c2a05 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-wind-speed-direction-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-wind-speed-direction-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-wind-speed-direction-content">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
index 4ce5cf21d7..929f41fe48 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
@@ -42,7 +42,6 @@ import {
   getSingleTsValueByDataKey,
   overlayStyle
 } from '@shared/models/widget-settings.models';
-import { WidgetComponent } from '@home/components/widget/widget.component';
 import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
@@ -92,6 +91,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   shapeResize$: ResizeObserver;
 
@@ -111,8 +111,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
   private windDirection = 0;
   private centerValueText = 'N/A';
 
-  constructor(private widgetComponent: WidgetComponent,
-              private imagePipe: ImagePipe,
+  constructor(private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {
@@ -142,6 +141,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
index 7801f80a17..5daa9e3d68 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
@@ -14,7 +14,6 @@
 /// limitations under the License.
 ///
 
-import { BatteryLevelLayout } from '@home/components/widget/lib/indicator/battery-level-widget.models';
 import {
   BackgroundSettings,
   BackgroundType,
@@ -59,6 +58,7 @@ export interface WindSpeedDirectionWidgetSettings {
   minorTicksColor: string;
   minorTicksFont: Font;
   background: BackgroundSettings;
+  padding: string
 }
 
 export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings = {
@@ -101,5 +101,6 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 };