간격

새로운 클래스들을 만들지 않고 레이아웃을 업데이트합니다. 간격 도우미들은 요소의 margin이나 padding을 조절하는 데 유용합니다.

Playground

Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.

p
a
-
2
m
a
-
2
Use the controls above to try out the different spacing helpers

How it works

요소에 0~5margin 이나 padding을 적용합니다. 각 크기의 증가는 일반적인 메테리얼 디자인 간격에 맞추어 디자인 되었습니다. 이 클래스들은 {속성}{방향}-{크기} 형식으로 적용됩니다.

속성 은 다음과 같은 간격의 유형에 적용됩니다

  • m - margin에 적용

  • p - padding에 적용

방향 은 속성이 적용되는 방향입니다.

  • t - margin-top 이나 padding-top의 속성에 적용

  • b - margin-bottom 이나 padding-bottom의 속성에 적용

  • l - margin-left 이나 padding-left의 속성에 적용

  • r - margin-right 이나 padding-right의 속성에 적용

  • x - *-left*-right에 둘다 적용

  • y - *-top*-bottom에 둘다 적용

  • a - margin 이나 padding 을 모든 방향에 적용

크기 는 해당 속성의 크기를 조절합니다.

  • 0 - margin 이나 padding0으로 설정하여 해당 속성을 제거합니다.

  • 1 - margin 이나 padding 의 값을 $spacer * .25로 설정

  • 2 - margin 이나 padding 의 값을 $spacer * .5로 설정

  • 3 - margin 이나 padding 의 값을 $spacer로 설정

  • 4 - margin 이나 padding 의 값을 $spacer * 1.5로 설정

  • 5 - margin 이나 padding 의 값을 $spacer * 3로 설정