간격
새로운 클래스들을 만들지 않고 레이아웃을 업데이트합니다. 간격 도우미들은 요소의 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.
How it works
요소에 0~5 의 margin 이나 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이나padding을0으로 설정하여 해당 속성을 제거합니다.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로 설정