마진

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

마진과 패딩의 차이

마진은 선택된 컴포넌트 기준으로 바깥쪽 여백을 설정하는 속성이고, 패딩은 선택된 컴포넌트 기준으로 안쪽 여백을 설정하는 속성입니다.

마진 설정 팁

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

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

3. 좌측 마진만큼 우측에 컴포넌트가 숨겨진 상태로 보입니다.

사용방법

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

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

3. 단위를 선택합니다.

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

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

기능설명

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

마진은 컴포넌트 밖으로 여백이 생겨 너비에 영향을 줍니다.

예를 들어 상위컴포넌트의 너비가 300px인 경우, 하위에 추가되는 컴포넌트의 첫번째의 너비가 200px, 우측 마진이 20px이고, 두번째 너비가 100px이라면 두번째 컴포넌트는 첫번째 컴포넌트 좌측이 아닌 하위에 배치됩니다.

따라하기

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