<BootStrap> css 공백 주는 법

부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여유 및 패딩 유틸리티 클래스가 포함되어 있다.

margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
border : 박스의 테두리
padding : 테두리와 content간의 간격
content : 엘리먼트 안에 포함되는 컨텐츠

ⓐ M/P
M : Margin
P : Padding

ⓑ t , b , l , r ,x , y
t : top
b : bottom
l : left
r : right
x : x축 -> left , right
y : y축 -> top , bottom

ⓒ 0, 1, 2, 3, 4, 5, auto
0 : 0
1 : .25rem( font-size가 16px이면, 4px) 크기
2 : .5rem( font-size가 16px이면, 8px) 크기
3 : 1rem( font-size가 16px이면, 16px) 크기
4 : 1.5rem( font-size가 16px이면, 24px) 크기
5 : 3rem( font-size가 16px이면, 48px) 크기
auto : margin의 자동으로 세팅

ⓓ n1, n2, n3, n4, n5
n : negative을 의미
n1 : -.25rem( font-size가 16px이면, -4px) 크기
n2 : -.5rem( font-size가 16px이면, -8px) 크기
n3 : -1rem( font-size가 16px이면, -16px) 크기
n4 : -1.5rem( font-size가 16px이면, -24px) 크기
n5 : -3rem( font-size가 16px이면, -48px) 크기

 

---

다음은 이러한 클래스의 몇 가지 대표적인 예다.

.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;
}

▶ Horizontal centering (수평 센터)
또한 Bootstrap에는 가로 여백을 auto로 설정하여 고정 너비 블록 수준 콘텐츠, 즉 display: block 및 너비 세트가 있는 콘텐츠를 수평으로 중앙에 배치하기 위한 .mx-auto 클래스도 포함되어 있다.

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