[Bootstrap] Spacing- Margin,Padding Utility

Sourced by Bootstrap

Bootstrap에는 spacing 을 편리하게 하기 위한 class들이 존재 하는데,

margin과 padding을 이용하는 것이다. (당연하지)

이것을 단축해서 사용할 수 있는데

ex) mt-0, ml-5

ex) pb-auto, pr-2

등등 이다.

차례차례 해석해 보자면

===========================================================

• m - for classes that set margin
• p - for classes that set padding

m은 margin

p는 padding을 뜻한다.

===========================================================

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

t는 margin 또는 padding의 top

b는 margin 또는 padding의 bottom

l은 margin 또는 padding의 left

r은 margin 또는 padding의 right

x는 margin 또는 padding의 left와 right

y는 margin 또는 padding의 top과 bottom

공백은 margin 또는 padding의 top, bottom, left, right

를 가리킨다.

===========================================================

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

0~5까지 숫자가 있고

각 숫자는 전체 box의 크기를 기반으로 margin 또는 padding에 0.25 * (숫자) 만큼 할당해 준다. 

auto는 margin만 auto로 한다. padding은 auto가 되지 않는다고 한다. (기본 css문법에서도 그렇다.)

padding은 auto쓰고 싶으면 그냥 0으로 두고 margin만 건드는 것을 추천.

===========================================================

아래는 실제로 css에서 어떻게 구현되어 있는지 보여준다.

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

===========================================================

그리고 bootstrap에서 나오는 마지막 꿀팁

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>