[Bootstrap] 레이아웃 / spacing

.

space

상하 좌우의 여백이나 패딩값을 부트스트랩에서 만든 클래스

Box Model

https://www.w3schools.com/css/css_boxmodel.asp

margin 과 padding 은 상하 좌우에 값을 매길 수 있다.
일반적으로 위쪽-오른쪽-아래쪽-왼쪽 순서로 px 이나 % 단위로 표기 (시계방향)

.

Notation (표기법)

{property}{sides}-{size} - {속성}{방향}-{크기}
{property}-{breakpoint}{sides}-{size} - {속성}{방향}-{크기}

https://getbootstrap.com/docs/4.4/utilities/spacing/

num	size
0	0
1	1rem * 0.25 = 4px
2	1rem * 0.5 = 8px
3	(default): 1rem = 16px
4	1rem * 1.5 = 24px
5	1rem * 3 = 48px
auto	auto

 

728x90

.

margin spacing

<div class="container">
    <h1 class="display-1 text-center">Margin Spacing</h1>
    <div class="row">
        <div class="col-2 mb-2">Lorem, ipsum.</div>
        <div class="col-2 mt-3">Lorem, ipsum.</div>
        <div class="col-2 mr-3">Lorem, ipsum.</div>
        <div class="col-2 ml-3">Lorem, ipsum.</div>
    	<div class="col-2">Lorem, ipsum.</div>
    </div>
</div>

margin spacing

 

<div class="container">
    <h1 class="display-1 text-center">Margin Spacing</h1>
    <div class="row">
        <div class="col-2 mb-2 mr-auto">Lorem, ipsum.</div>
        <div class="col-2 mt-3">Lorem, ipsum.</div>
        <div class="col-2 mr-3">Lorem, ipsum.</div>
        <div class="col-2 ml-3">Lorem, ipsum.</div>
        <div class="col-2 ml-auto">Lorem, ipsum.</div>
    </div>
</div>

mr-auto, ml-auto 적용

 

반응형

.

padding spacing

<div class="container">
    <h1 class="display-1 text-center">Padding Spacing</h1>
    <div class="row">
        <div class="col-3 pb-5"><p>Lorem, ipsum</p></div>
        <div class="col-3 pt-5"><p>Lorem, ipsum</p></div>
        <div class="col-3 pl-5"><p>Lorem, ipsum</p></div>
        <div class="col-3 pr-5"><p>Lorem, ipsum</p></div>
    </div>
</div>

padding spacing