diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts
index 74a9d09..d986de1 100644
--- a/src/Components/Canvas/DimensionLayer.ts
+++ b/src/Components/Canvas/DimensionLayer.ts
@@ -2,7 +2,7 @@ import { Orientation } from '../../Enums/Orientation';
 import { Position } from '../../Enums/Position';
 import { type IContainerModel } from '../../Interfaces/IContainerModel';
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, DIMENSION_MARGIN } from '../../utils/default';
+import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, DIMENSION_MARGIN, SHOW_SELF_MARGINS_DIMENSIONS } from '../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools';
 import { TransformX, TransformY } from '../../utils/svg';
 import { type IDimensionStyle } from '../SVG/Elements/Dimension';
@@ -33,6 +33,22 @@ export function AddContainerDimensions(
     );
   }
 
+  if (SHOW_SELF_MARGINS_DIMENSIONS &&
+    container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
+    ActionByPosition(
+      ctx,
+      dimMapped,
+      container.properties.dimensionOptions.selfMarginsDimensions.positions,
+      AddHorizontalSelfMarginsDimension,
+      AddVerticalSelfMarginDimension,
+      [
+        container,
+        currentTransform,
+        scale
+      ]
+    );
+  }
+
   if (SHOW_BORROWER_DIMENSIONS &&
     container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
     ActionByPosition(
@@ -437,6 +453,116 @@ function AddHorizontalSelfDimension(
   });
 }
 
+function AddHorizontalSelfMarginsDimension(
+  ctx: CanvasRenderingContext2D,
+  yDim: number,
+  container: IContainerModel,
+  currentTransform: [number, number],
+  dimensions: React.ReactNode[],
+  scale: number
+): void {
+  const style = container.properties.dimensionOptions.selfMarginsDimensions;
+  const left = container.properties.margin.left;
+  if (left != null) {
+    const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
+    const xStart = container.properties.x + currentTransform[0] - left;
+    const xEnd = xStart + left;
+    const text = left
+      .toFixed(0)
+      .toString();
+    RenderDimension(ctx, {
+      id,
+      xStart,
+      yStart: yDim,
+      xEnd,
+      yEnd: yDim,
+      text,
+      scale,
+      style
+    });
+  }
+
+  const right = container.properties.margin.right;
+  if (right != null) {
+    const id = `dim-y-margin-right${yDim.toFixed(0)}-${container.properties.id}`;
+    const xStart = container.properties.x + container.properties.width + currentTransform[0];
+    const xEnd = xStart + right;
+    const text = right
+      .toFixed(0)
+      .toString();
+
+    RenderDimension(ctx, {
+      id,
+      xStart,
+      yStart: yDim,
+      xEnd,
+      yEnd: yDim,
+      text,
+      scale,
+      style
+    });
+  }
+}
+
+function AddVerticalSelfMarginDimension(
+  ctx: CanvasRenderingContext2D,
+  xDim: number,
+  isRight: boolean,
+  container: IContainerModel,
+  currentTransform: [number, number],
+  scale: number
+): void {
+  const style = container.properties.dimensionOptions.selfMarginsDimensions;
+  const top = container.properties.margin.top;
+  if (top != null) {
+    const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;
+    let yStart = container.properties.y + currentTransform[1];
+    let yEnd = yStart - top;
+    const textVert = top
+      .toFixed(0)
+      .toString();
+
+    if (isRight) {
+      [yStart, yEnd] = [yEnd, yStart];
+    }
+
+    RenderDimension(ctx, {
+      id: idVert,
+      xStart: xDim,
+      yStart,
+      xEnd: xDim,
+      yEnd,
+      text: textVert,
+      scale,
+      style
+    });
+  }
+  const bottom = container.properties.margin.bottom;
+  if (bottom != null) {
+    const idVert = `dim-x-margin-bottom${xDim.toFixed(0)}-${container.properties.id}`;
+    let yStart = container.properties.y + container.properties.height + bottom + currentTransform[1];
+    let yEnd = yStart - bottom;
+    const textVert = bottom
+      .toFixed(0)
+      .toString();
+
+    if (isRight) {
+      [yStart, yEnd] = [yEnd, yStart];
+    }
+
+    RenderDimension(ctx, {
+      id: idVert,
+      xStart: xDim,
+      yStart,
+      xEnd: xDim,
+      yEnd,
+      text: textVert,
+      scale,
+      style
+    });
+  }
+}
+
 function AddHorizontalSymbolDimension(
   ctx: CanvasRenderingContext2D,
   symbol: ISymbolModel,