spacing 간격주기

간격 조정하는 방법

마진(margin) : 내용 경계 바깥쪽으로 간격을 두는 방법

패딩(padding) : 내용 경계 안쪽으로 간격을 두는 방법

 

 

m-숫자를 추가해 마진을 줄 수 있다.

p-숫자를 추가해 패딩을 줄 수 있다.

ml-auto : 왼쪽 마진을 최대한 확보(오른쪽 정렬)

mr-auto: 오른쪽으로 마진을 최대한 확보(왼쪽 정렬)

코드	의미	코드	의미
t	위쪽(top)	b	아래쪽(bottom)
l	왼쪽(left)	r	오른쪽(right)
x	왼쪽 오른쪽 모두(x축 방향)	y	위 아래 모두(y축 방향)
(없음)	왼쪽, 오른쪽, 위, 아래 모두

 

$spacer : 기본적으로 글자 크기와 동일하게 설정

코드	의미
m-1	$spacer*.25만큼 마진을 추가합니다. 글자 크기가16px이라면 4px여백을 줍니다.
m-2	$spacer*.5만큼 마진을 추가합니다. 글자 크기가 16px이라면 8px 여백을 줍니다.
m-3	$spacer*1.만큼 마진을 추가합니다. 글자 크기가 16px이라면 16px 여백을 줍니다.
m-4	$spacer*1.5만큼 마진을 추가합니다. 글자 크기가 16px이라면 24px 여백을 줍니다.
m-5	$spacer*3만큼 마진을 추가합니다. 글자 크기가 16px이라면 48px 여백을 줍니다.
m-auto	자동으로 여백을 조정합니다.

 

마진 또는 패딩의 크기는 $spacer의 크기에 비례한다.

mb-4로 설정하면 아래 여백 4 단위로 준다.