매뉴얼::margin padding

margin

외부여백을 설정하는 margin속성이 0부터 3까지 정의되어 있습니다.

간격 0 .margin-0 .margin-top-0 .margin-right-0 .margin-bottom-0 .margin-left-0 .margin-width-0 .margin-height-0

간격 1em .margin-1 .margin-top-1 .margin-right-1 .margin-bottom-1 .margin-left-1 .margin-width-1 .margin-height-1

간격 2em .margin-2 .margin-top-2 .margin-right-2 .margin-bottom-2 .margin-left-2 .margin-width-2 .margin-height-2

간격 3em .margin-3 .margin-top-3 .margin-right-3 .margin-bottom-3 .margin-left-3 .margin-width-3 .margin-height-3

margin-1

코드

<div class="margin-1">
    컨텐츠
</div>

설명

외부여백 1em을 줍니다.

결과화면

컨텐츠영역

margin-1 (외부여백:1em)

컨텐츠

코드

<div class="margin-1">컨텐츠</div>
<div class="margin-1">컨텐츠</div>
<div class="margin-1">컨텐츠</div>
<div class="margin-1">컨텐츠</div>

margin-2

코드

<div class="margin-2">
    컨텐츠
</div>

설명

외부여백 2em을 줍니다.

결과화면

컨텐츠영역

margin-2 (외부여백:2em)

컨텐츠

코드

<div class="margin-2">컨텐츠</div>
<div class="margin-2">컨텐츠</div>
<div class="margin-2">컨텐츠</div>
<div class="margin-2">컨텐츠</div>

margin-3

코드

<div class="margin-3">
    컨텐츠
</div>

설명

외부여백 3em을 줍니다.

결과화면

컨텐츠영역

margin-3 (외부여백:3em)

컨텐츠

코드

<div class="margin-3">컨텐츠</div>
<div class="margin-3">컨텐츠</div>
<div class="margin-3">컨텐츠</div>
<div class="margin-3">컨텐츠</div>

margin-width-1

코드

<div class="margin-width-1">
    컨텐츠
</div>

설명

외부 좌우여백 1em을 줍니다.

결과화면

컨텐츠영역

margin-width-1 (좌우여백:1em)

컨텐츠

코드

<div class="margin-width-2">
    컨텐츠
</div>

설명

외부 좌우여백 2em을 줍니다.

결과화면

컨텐츠영역

margin-width-2 (좌우여백:2em)

컨텐츠

코드

<div class="margin-width-3">
    컨텐츠
</div>

설명

외부 좌우여백 3em을 줍니다.

결과화면

컨텐츠영역

margin-width-3 (좌우여백:3em)

컨텐츠

margin-height-1

코드

<div class="margin-height-1">
    컨텐츠
</div>

설명

외부 상하여백 1em을 줍니다.

결과화면

컨텐츠영역

margin-height-1 (상하여백:1em)

컨텐츠

코드

<div class="margin-height-2">
    컨텐츠
</div>

설명

외부 상하여백 2em을 줍니다.

결과화면

컨텐츠영역

margin-height-2 (상하여백:2em)

컨텐츠

코드

<div class="margin-height-3">
    컨텐츠
</div>

설명

외부 상하여백 3em을 줍니다.

결과화면

컨텐츠영역

margin-height-3 (상하여백:3em)

컨텐츠

응용

코드

<div>
    <div class="margin-height-2">
        <div class="margin-width-2"><span>1</span></div>
        <div class="margin-width-0"><span>2</span></div>
        <div class="margin-width-2"><span>3</span></div>
    </div>
    <div class="margin-height-1">
        <div class="margin-top-1 margin-right-2 margin-bottom-1 margin-left-1"><span>4</span></div>
        <div class="margin-top-1 margin-right-2 margin-bottom-1 margin-left-0"><span>5</span></div>
        <div class="margin-top-1 margin-right-1 margin-bottom-1 margin-left-0"><span>6</span></div>
    </div>
    <div class="margin-height-2 margin-bottom-1"> <!-- 속성이 겹칠경우 단일속성(top,right,bottom,left 한쪽만 정의된)값이 우선적용 됩니다 -->
        <div class="margin-top-0 margin-right-3 margin-bottom-1 margin-left-0"><span>7</span></div>
        <div class="margin-top-0 margin-right-3 margin-bottom-1 margin-left-0"><span>8</span></div>
        <div class="margin-top-0 margin-right-0 margin-bottom-1 margin-left-0"><span>9</span></div>
    </div>
</div>

padding

내부여백을 설정하는 padding속성이 0부터 3까지 정의되어 있습니다.

간격 0 .padding-0 .padding-top-0 .padding-right-0 .padding-bottom-0 .padding-left-0 .padding-width-0 .padding-height-0

간격 1em .padding-1 .padding-top-1 .padding-right-1 .padding-bottom-1 .padding-left-1 .padding-width-1 .padding-height-1

간격 2em .padding-2 .padding-top-2 .padding-right-2 .padding-bottom-2 .padding-left-2 .padding-width-2 .padding-height-2

간격 3em .padding-3 .padding-top-3 .padding-right-3 .padding-bottom-3 .padding-left-3 .padding-width-3 .padding-height-3

padding-1

코드

<div class="padding-1">
    컨텐츠
</div>

설명

내부여백 1em을 줍니다.

결과화면

컨텐츠영역

padding-1 (내부여백:1em)

컨텐츠

코드

<div class="padding-1">컨텐츠</div>
<div class="padding-1">컨텐츠</div>
<div class="padding-1">컨텐츠</div>
<div class="padding-1">컨텐츠</div>

padding-2

코드

<div class="padding-2">
    컨텐츠
</div>

설명

내부여백 2em을 줍니다.

결과화면

컨텐츠영역

padding-2 (내부여백:2em)

컨텐츠

코드

<div class="padding-2">컨텐츠</div>
<div class="padding-2">컨텐츠</div>
<div class="padding-2">컨텐츠</div>
<div class="padding-2">컨텐츠</div>

padding-3

코드

<div class="padding-3">
    컨텐츠
</div>

설명

내부여백 3em을 줍니다.

결과화면

컨텐츠영역

padding-3 (내부여백:3em)

컨텐츠

코드

<div class="padding-3">컨텐츠</div>
<div class="padding-3">컨텐츠</div>
<div class="padding-3">컨텐츠</div>
<div class="padding-3">컨텐츠</div>

padding-width-1

코드

<div class="padding-width-1">
    컨텐츠
</div>

설명

컨텐츠 내부 좌우여백 1em을 줍니다.

결과화면

컨텐츠영역

내부 좌우여백:1em

컨텐츠

코드

<div class="padding-width-2">
    컨텐츠
</div>

설명

컨텐츠 내부 좌우여백 2em을 줍니다.

결과화면

컨텐츠영역

내부 좌우여백:2em

컨텐츠

코드

<div class="padding-width-3">
    컨텐츠
</div>

설명

컨텐츠 내부 좌우여백 3em을 줍니다.

결과화면

컨텐츠영역

내부 좌우여백:3em

컨텐츠

padding-height-1

코드

<div class="padding-height-1">
    컨텐츠
</div>

설명

내부 상하여백 1em을 줍니다.

결과화면

컨텐츠영역

내부 상하여백:1em

컨텐츠

코드

<div class="padding-height-2">
    컨텐츠
</div>

설명

내부 상하여백 2em을 줍니다.

결과화면

컨텐츠영역

내부 상하여백:2em

컨텐츠

코드

<div class="padding-height-3">
    컨텐츠
</div>

설명

내부 상하여백 3em을 줍니다.

결과화면

컨텐츠영역

내부 상하여백:3em

컨텐츠

응용

코드

<div>
    <div>
        <div class="padding-width-1"><span>1</span></div>
        <div class="padding-width-2"><span>2</span></div>
        <div class="padding-width-3"><span>3</span></div>
    </div>
    <div>
        <div class="padding-top-1 padding-right-2 padding-bottom-1 padding-left-1"><span>4</span></div>
        <div class="padding-height-1 padding-right-2 padding-left-0"><span>5</span></div>
        <div class="padding-height-1 padding-right-1 padding-left-2"><span>6</span></div>
    </div>
    <div>
        <div class="padding-top-0 padding-right-3 padding-bottom-1 padding-left-0"><span>7</span></div>
        <div class="padding-top-0 padding-width-2 padding-bottom-1"><span>8</span></div>
        <div class="padding-top-0 padding-right-0 padding-bottom-1 padding-left-0"><span>9</span></div>
    </div>
</div>

m-margin, e-margin

모바일화면에서 적용되는 margin속성입니다.
m-margin-클래스는 모바일 눕혀서보기 화면에서 적용되고
e-margin-클래스는 모바일 바로보기 화면에서 적용됩니다.

응용

코드

<div class="margin-1 m-margin-0">
    컨텐츠
</div>

설명

PC화면에서는 margin-1이 적용되고, 모바일 화면에서는 margin-0이 적용됩니다.

결과화면

컨텐츠영역

외부여백:1em

m-margin-0

컨텐츠

코드

<div class="margin-3 m-margin-1 e-margin-width-0 e-margin-height-1">
    컨텐츠
</div>

설명

PC화면에서는 margin-3 적용, 모바일 눕혀서보기 화면에서는 margin-1 적용, 모바일 바로보기 화면에서는 margin-height-1이 적용됩니다.

결과화면

컨텐츠영역

외부여백:3em

m-margin-1

e-margin-height-1

컨텐츠

코드

<div class="margin-2 m-margin-1 e-margin-0">컨텐츠</div>
<div class="margin-2 m-margin-1 e-margin-0">컨텐츠</div>
<div class="margin-2 m-margin-1 e-margin-0">컨텐츠</div>
<div class="margin-2 m-margin-1 e-margin-0">컨텐츠</div>

설명

PC화면에서 margin-2 적용, 모바일 눕혀서보기 화면에서는 margin-1 적용, 모바일 바로보기 화면에서는 margin-0이 적용됩니다.

m-padding, e-padding

모바일화면에서 적용되는 padding속성입니다.
m-padding-클래스는 모바일 눕혀서보기 화면에서 적용되고
e-padding-클래스는 모바일 바로보기 화면에서 적용됩니다.

응용

코드

<div class="padding-1 m-padding-0">
    컨텐츠
</div>

설명

PC화면에서는 padding-1이 적용되고, 모바일 화면에서는 padding-0이 적용됩니다.

결과화면

컨텐츠영역

padding-1

m-padding-0

컨텐츠

코드

<div class="padding-3 m-padding-1 e-padding-width-0 e-padding-height-1">
    컨텐츠
</div>

설명

PC화면에서는 padding-3 적용, 모바일 눕혀서보기 화면에서는 padding-1 적용, 모바일 바로보기 화면에서는 padding-height-1이 적용됩니다.

결과화면

컨텐츠영역

padding-3

m-padding-1

e-padding-height-1

컨텐츠

코드

<div class="padding-2 m-padding-1 e-padding-0">컨텐츠</div>
<div class="padding-2 m-padding-1 e-padding-0">컨텐츠</div>
<div class="padding-2 m-padding-1 e-padding-0">컨텐츠</div>
<div class="padding-2 m-padding-1 e-padding-0">컨텐츠</div>

설명

PC화면에서 padding-2 적용, 모바일 눕혀서보기 화면에서는 padding-1 적용, 모바일 바로보기 화면에서는 padding-0이 적용됩니다.

코드

결과화면

코드

코드

결과화면

코드

코드

결과화면

코드

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

코드

결과화면

코드

코드

결과화면

코드

코드

결과화면

코드

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

결과화면

코드

코드

결과화면

코드

결과화면

코드

코드

결과화면

코드

결과화면

코드

user-background-1

예제소스

결과화면

list-style-2

예제소스

margin 응용

예제소스

padding 응용

예제소스