---
title: "Margin | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Margin/"
---

# Margin

> - [`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent)

## Classes

### Margin

#### Extends

#### Implements

- [`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged)\<[`Margin`](#margin), `string`\>
- [`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb)

#### Constructors

##### Constructor

```ts
new Margin(value?): Margin;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value?` | \| `number` \| \{ `horizontal`: `number`; `vertical`: `number`; \} \| \{ `bottom`: `number`; `left`: `number`; `right`: `number`; `top`: `number`; \} |

###### Returns

[`Margin`](#margin)

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`constructor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#constructor)

#### Properties

##### id

```ts
id: string;
```

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`id`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#id)

#### Accessors

##### bottom

###### Get Signature

```ts
get bottom(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set bottom(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`bottom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#bottom)

##### isEmpty

###### Get Signature

```ts
get isEmpty(): boolean;
```

###### Returns

`boolean`

##### left

###### Get Signature

```ts
get left(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set left(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`left`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#left)

##### name

###### Get Signature

```ts
get name(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set name(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`name`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#name)

##### right

###### Get Signature

```ts
get right(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set right(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`right`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#right)

##### tags

###### Get Signature

```ts
get tags(): object;
```

###### Returns

`object`

###### Set Signature

```ts
set tags(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | \{ \[`key`: `string`\]: `any`; \} |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`tags`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#tags)

##### top

###### Get Signature

```ts
get top(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set top(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`top`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#top)

##### version

###### Get Signature

```ts
get version(): string;
```

###### Returns

`string`

###### Inherited from

[`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup).[`version`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#version)

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#addpropertychanged)

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#addpropertychanged)

##### clone()

```ts
clone(): Margin;
```

###### Returns

[`Margin`](#margin)

##### equals()

```ts
equals(other): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`Margin`](#margin) |

###### Returns

`boolean`

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`equals`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#equals)

##### generateNewIds()

```ts
generateNewIds(): void;
```

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`generateNewIds`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#generatenewids)

##### getSimplifiedObject()

```ts
getSimplifiedObject(): object;
```

###### Returns

`object`

###### bottom

```ts
bottom: number;
```

###### left

```ts
left: number;
```

###### right

```ts
right: number;
```

###### top

```ts
top: number;
```

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`getSimplifiedObject`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#getsimplifiedobject)

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#removepropertychanged)

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#removepropertychanged)

##### toString()

```ts
toString(): string;
```

Returns a string representation of an object.

###### Returns

`string`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`toString`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#tostring)

##### parse()

```ts
static parse(value, parseSchema?): Margin;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `string` \| `number` | `undefined` |
| `parseSchema` | `"TopFirst"` \| `"LeftFirst"` | `"TopFirst"` |

###### Returns

[`Margin`](#margin)

## Interfaces

### IMargin

#### Properties

##### bottom

```ts
bottom: number;
```

##### left

```ts
left: number;
```

##### right

```ts
right: number;
```

##### top

```ts
top: number;
```