3-5. 마진과 패딩
부트스트랩에서는 반응형 웹에 쉽고 편리하게 적용할 수 있는 마진(margin)과 패딩에 관련된 클래스를 제공합니다.
■ 마진(margin)
부트스트랩의 클래스 .mt-5은 상단 마진을 의미하는 CSS 속성 margin-top에 3rem의 여백을 삽입합니다.
부트스트랩에서 제공하는 마진 클래스의 종류는 다음과 같습니다.
- .m : margin
- .mt : margin-top
- .me : margin-right
- .mb : margin-bottom
- .ms : margin-left
- .mx : X축 margin
- .my : Y축 margin
부트스트랩에서 제공하는 마진 클래스에 사용되는 숫자는 0, 1, 2, 3, 4, 5이며 실제 크기는 다음과 같습니다.
- 0 : 마진 없음
- 1 : 0.25rem
- 2 : 0.5rem
- 3 : 1rem
- 4 : 1.5rem
- 5 : 3rem
마진(margin) 사용 예
ex3-9.html
<div class="container mt-3">
<h3>마진(margin)</h3>
<h4>1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem</h4>
<div class="border text-center">
<div class="bg-light border m-5">m: margin-top</div>
<div class="bg-light border mt-1">mt: margin-top</div>
<div class="bg-light border me-2">me: margin-right</div>
<div class="bg-light border mb-3">mb: margin-bottom</div>
<div class="bg-light border ms-4">ms: margin-left</div>
<div class="bg-light border mx-5">mx: X축 margin</div>
<div class="bg-light border my-5">my: Y축 margin</div>
</div>
<div class="w-50 bg-danger mt-3 p-5 text-center text-white mx-auto">mx-auto: 박스 중앙 정렬</div>
</div>
ex3-9.html의 실행 결과
■ 패딩(margin)
부트스트랩의 패딩은 마진과 사용 방법이 거의 동일합니다. 예를 들어 클래스 .pt-5은 상단 패딩 padding-top에 3rem의 여백을 삽입합니다.
부트스트랩에서 제공하는 패딩 클래스의 종류는 다음과 같습니다.
- .p : padding
- .pt : padding-top
- .pe : padding-right
- .pb : padding-bottom
- .ps : padding-left
- .px : X축 padding
- .py : Y축 padding
부트스트랩에서 제공하는 패딩 클래스에 사용되는 숫자는 마진과 마찬가지로 0, 1, 2, 3, 4, 5입니다.
- 0 : 패딩 없음
- 1 : 0.25rem
- 2 : 0.5rem
- 3 : 1rem
- 4 : 1.5rem
- 5 : 3rem
패딩(padding) 사용 예
ex3-10.html
<div class="container mt-3">
<h3>패딩(padding)</h3>
<h4>1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem</h4>
<div class="float-start border bg-info p-5">padding</div>
<div class="float-start border bg-info pt-1">padding-top</div>
<div class="float-start border bg-info pe-2">padding-right</div>
<div class="float-start border bg-info pb-3">padding-bottom</div>
<div class="float-start border bg-info ps-4">padding-left</div>
<div class="float-start border bg-info px-5">X축 padding</div>
<div class="float-start border bg-info py-5">Y축 padding</div>
</div>
ex3-10.html의 실행 결과
