Bootstrap 클래스 margin/padding 넣는 법 정리

Bootstrap 매번 마진 패딩 넣는 방법들에 대해서 헷갈렸는데.. 한번에 정리를 해둬야 겠습니다!!

1. Margin 넣는법

부트스트랩에서는 m-* 클래스를 사용하여 요소의 마진을 지정할 수 있습니다.

m-* 클래스는 다음과 같은 값을 가질 수 있습니다.

• m-0 : 모든 방향의 마진을 0으로 설정합니다.
• m-1 : 모든 방향의 마진을 0.25rem으로 설정합니다.
• m-2 : 모든 방향의 마진을 0.5rem으로 설정합니다.
• m-3 : 모든 방향의 마진을 1rem으로 설정합니다.
• m-4 : 모든 방향의 마진을 1.5rem으로 설정합니다.
• m-5 : 모든 방향의 마진을 3rem으로 설정합니다.
• mx-* : 가로 방향의 마진을 지정합니다.
• my-* : 세로 방향의 마진을 지정합니다.
• mt-* : 위쪽 방향의 마진을 지정합니다.
• mb-* : 아래쪽 방향의 마진을 지정합니다.
• ml-* : 왼쪽 방향의 마진을 지정합니다.
• mr-* : 오른쪽 방향의 마진을 지정합니다.

각 클래스는 지정된 마진 크기만큼 요소 주위에 여백을 만듭니다. 예를 들어, mt-3 클래스는 요소 위쪽에 1rem(16px)의 마진을 만듭니다.

<div class="m-3">모든 방향에 1rem 마진</div>
<div class="mx-3">좌우 방향에 0.5rem 마진</div>
<div class="my-3">상하 방향에 0.5rem 마진</div>
<div class="mt-3">위쪽에 1rem 마진</div>
<div class="mb-3">아래쪽에 1rem 마진</div>
<div class="ml-3">왼쪽에 1rem 마진</div>
<div class="mr-3">오른쪽에 1rem 마진</div>

 

2. Padding 넣는법

부트스트랩에서는 p-* 클래스를 사용하여 요소의 패딩을 지정할 수 있습니다. p-* 클래스는 마진 클래스와 유사한 값을 가질 수 있습니다.

• p-0 : 모든 방향의 패딩을 0으로 설정합니다.
• p-1 : 모든 방향의 패딩을 0.25rem으로 설정합니다.
• p-2 : 모든 방향의 패딩을 0.5rem으로 설정합니다.
• p-3 : 모든 방향의 패딩을 1rem으로 설정합니다.
• p-4 : 모든 방향의 패딩을 1.5rem으로 설정합니다.
• p-5 : 모든 방향의 패딩을 3rem으로 설정합니다.
• px-* : 가로 방향의 패딩을 지정합니다.
• py-* : 세로 방향의 패딩을 지정합니다.
• pt-* : 위쪽 방향의 패딩을 지정합니다.
• pb-* : 아래쪽 방향의 패딩을 지정합니다.
• pl-* : 왼쪽 방향의 패딩을 지정합니다.
• pr-* : 오른쪽 방향의 패딩을 지정합니다.

각 클래스는 지정된 패딩 크기만큼 요소 내부에 여백을 만듭니다. 예를 들어, pt-3 클래스는 요소 상단에 1rem(16px)의 패딩을 만듭니다.

<div class="p-3">모든 방향에 1rem 패딩</div>
<div class="px-3">좌우 방향에 0.5rem 패딩</div>
<div class="py-3">상하 방향에 0.5rem 패딩</div>
<div class="pt-3">위쪽에 1rem 패딩</div>
<div class="pb-3">아래쪽에 1rem 패딩</div>
<div class="pl-3">왼쪽에 1rem 패딩</div>
<div class="pr-3">오른쪽에 1rem 패딩</div>