# Size

<figure><img src="https://2175080280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHdZ32eborYFcmdxjlQYD%2Fuploads%2FcN5qzpe2JCY3iyAw7Yqy%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-11-07%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.12.59.png?alt=media&#x26;token=f821f8fc-a63a-4473-9df8-7e6d2749ac13" alt=""><figcaption><p>Size tab</p></figcaption></figure>

### Padding

Padding 값이 들어가는 위치를 나타내는 아이콘과 위,아래,좌,우 네개의 Padding 값을 적용시킬 수 있습니다.

[Margin](#margin)과 같은 순서로 왼쪽-위-오른쪽-아래 순서로 값을 확인하거나 수정할 수 있습니다.

각 값들은 padding-left, padding-top, padding-right, padding-bottom으로 개별 선택 가능합니다.

Padding을 수정을 하면 자동설정이 해제 됩니다.

### Margin

Margin 값이 들어가는 위치를 나타내는 아이콘과 위,아래,좌,우 네개의 Margin 값을 적용시킬 수 있습니다.

[Padding](#padding)과 같은 순서로 왼쪽-위-오른쪽-아래 순서로 값을 확인하거나 수정할 수 있습니다.

각 값들은 margin-left, margin-top, margin-right, margin-bottom으로 개별 선택 가능합니다.

Margin을 수정을 하면 자동설정이 해제 됩니다.

### SizeType

#### **Width Type**

* None
* Fixed - 가로길이를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

#### **Height Type**

* None
* Fixed - 높이를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

#### **Min Width Type** : minimum width

* None
* Fixed - 최소 가로길이를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

#### **Min Height Type** : minimum height

* None
* Fixed - 최소 높이를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

#### **Max Width Type** : maximum width

* None
* Fixed - 최대 가로를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

#### **Max Height Type** : maximum height

* None
* Fixed - 최대 높이를 지정하고 싶을 때 사용
* Fill - element의 margin 부분 빼고 채움

### Flex

#### **FlexGrow** : Number

* css property인 flex-grow

<https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow>

#### **FlexShrink** : Number

* css property인 flex-shrink
* 기본값 : flex-shrink : 0;

<https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink>
