패딩

컴포넌트를 기준으로 내부로 여백을 설정하는 속성입니다.

1. 컴포넌트의 너비가 100%로 설정되어 있습니다.

2. 좌측 마진을 24px로 설정하면 하위 컴포넌트가 우측으로 밀립니다.

3. 하단 마진을 24p로 설정하면 하위 컴포넌트가 상단으로 밀립니다.

4. 패딩은 컴포넌트의 너비에는 영향을 미치지 않습니다.

사용방법

1. 패딩을 설정할 컴포넌트를 선택합니다.

2. 패딩(T,R,B,L)을 활성화 합니다.

3. 단위를 선택합니다.

4. 입력필드에 상하좌우 공통으로 설정할 수치를 입력합니다.

5. 공통으로 설정하지 않을 경우 개별 설정 버튼을 선택합니다.
6. 상하좌우에 원하는 수치를 입력합니다. (다중 입력이 가능합니다.)

기능설명

모양	기능	속성	의미
	단위	%	상위의 사이즈에 따라 백분율로 값 설정
		px	고정값 설정
	입력필드		상하좌우 공통으로 설정할 값 입력
	개별 값 입력	상단	입력한 값 만큼 컴포넌트 안쪽 상단 여백
		우측	입력한 값 만큼 컴포넌트 안쪽 우측 여백
		하단	입력한 값 만큼 컴포넌트 안쪽 하단 여백
		좌측	입력한 값 만큼 컴포넌트 안쪽 좌측 여백

패딩은 컴포넌트 안으로 여백이 생겨 너비에 영향을 주지 않아요.

예를 들어 상위 컴포넌트의 너비가 300px인 경우, 하위 컴포넌트로 추가되는 첫번째 컴포넌트의 너비가 200px, 우측 패딩을 20px로 설정한 경우, 두번째 컴포넌트의 너비가 100px이라면 첫번째 컴포넌트 좌측에 배치됩니다.

따라하기

화면 속 [시작하기]버튼을 눌러 데모를 확인하실 수 있습니다.