공간 / 여백 + 숫자값

공간 padding / 여백 margin

Padding(공간)
    - 내가 가진 범위 틀 안에서 여유있는 공간을 설정하는 것
    pt- : (padding-top)태그 위쪽 공간을 설정
    pr- : (padding-right)태그 오른쪽 공간을 설정
    pl- : (padding-left)태그 왼쪽 공간을 설정
    pb- : (padding-bottom)태그 아래쪽 공간을 설정

    px- : 태그의 왼쪽, 오른쪽 공간을 설정
    py- : 태그의 위쪽, 아래쪽 공간을 설정
    p- : 태그의 모든방향 공간을 설정

Margin(여백)
    - 다른 태그나 다른 값과 거리를 두는 것
    mt- : (margin-top)태그 위쪽 여백을 설정
    mr- : (margin-right)태그 오른쪽 여백을 설정
    ml- : (margin-left)태그 왼쪽 여백을 설정
    mb- : (margin-bottom)태그 아래쪽 여백을 설정

    mx- : 태그의 왼쪽, 오른쪽 여백을 설정
    my- : 태그의 위쪽, 아래쪽 여백을 설정
    m- : 태그의 모든방향 여백을 설정

    ms- : (margin-start)왼쪽에 공간을 최대한 많이 제공하고 모든 태그를 가능한 오른쪽으로 붙여 정렬

 

 

숫자값

 

각 값에는 숫자를 넣을 수 있으며 "0, 1, 2, 3, 4, 5, auto"를 사용할 수 있음

0 : 여백이나 패딩이 없음
1 : 25rem (=4px)
2 : 5rem (=8px)
3 : 1rem (=16px)
4 : 1.5rem (=24px)
5 : 3rem (=48px)

rem과 px 관계

0.25rem = 0.25 * 16 = 4px
0.5rem = 0.5 * 16 = 8px
1rem = 1 * 16 = 16px
1.5rem = 1.5 * 16 = 24px
3rem = 3 * 16 = 48px