> [Wiki](Home) ▸ [[API Reference|API-Reference]] ▸ [[Renderer|Renderer-API]] ▸ [[Item|Renderer-Item-API]] ▸ **Margin**
#Margin
- Syntax
Item.Margin- Static property of
- Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#margin)
## Table of contents
* [Margin](#margin)
* [**Class** Margin](#class-margin)
* [left](#left)
* [top](#top)
* [right](#right)
* [bottom](#bottom)
* [horizontal](#horizontal)
* [onHorizontalChange](#onhorizontalchange)
* [vertical](#vertical)
* [onVerticalChange](#onverticalchange)
* [valueOf](#valueof)
* [Glossary](#glossary)
# **Class** Margin
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#class-margin)
Margins are used in anchors and within layout items.
```javascript
Rectangle {
width: 100
height: 100
color: 'red'
Rectangle {
width: 100
height: 50
color: 'yellow'
anchors.left: parent.right
margin.left: 20
}
}
```
```javascript
Column {
Rectangle { color: 'red'; width: 50; height: 50; }
Rectangle { color: 'yellow'; width: 50; height: 50; margin.top: 20; }
Rectangle { color: 'green'; width: 50; height: 50; }
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#class-margin)
##left
- Syntax
*Float* Margin::left = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#left)
##top
- Syntax
*Float* Margin::top = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#top)
##right
- Syntax
*Float* Margin::right = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#right)
##bottom
- Syntax
*Float* Margin::bottom = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#bottom)
##horizontal
- Syntax
*Float* Margin::horizontal = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
Sum of the left and right margin.
##onHorizontalChange
- Syntax
*Signal* Margin::onHorizontalChange(*Float* oldValue)- Prototype method of
- Margin
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#onhorizontalchange)
##vertical
- Syntax
*Float* Margin::vertical = `0`- Prototype property of
- Margin
- Type
- Float
- Default
0
Sum of the top and bottom margin.
##onVerticalChange
- Syntax
*Signal* Margin::onVerticalChange(*Float* oldValue)- Prototype method of
- Margin
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#onverticalchange)
##valueOf
- Syntax
*Float* Margin::valueOf()- Prototype method of
- Margin
- Returns
- Float
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/margin.litcoffee#valueof)
# Glossary
- [Item.Margin](#class-margin)