패딩(padding)

내부에 여백을 주는 padding 속성입니다. 간편하게 사용할 수 있도록 몽9 에디터에서 미리 클래스를 정해두었습니다.

소개

패딩을 주고 싶은 객체에 padding-n 클래스를 삽입합니다.
상하 여백(padding-top, padding-bottom)만 주고 싶을 때는 padding-height-n 클래스를 삽입합니다.
좌우 여백(padding-right, padding-left)만 주고 싶을 때는 padding-width-n 클래스를 삽입합니다.

m9-padding-1

padding:1em 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-1
컨텐츠

코드

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

m9-padding-2

padding:2em 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-2
컨텐츠

코드

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

m9-padding-3

padding:3em 이 적용됩니다.

결과

컨텐츠 영역11

m9-padding-3(내부여백:3em)
컨텐츠

코드

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

m9-padding-width-1

padding: 1em 0 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-width-1
컨텐츠

코드

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

m9-padding-width-2

padding: 2em 0 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-width-2
컨텐츠

코드

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

m9-padding-width-3

padding: 3em 0 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-width-3
컨텐츠

코드

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

m9-padding-height-1

padding: 0 1em 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-height-1
컨텐츠

코드

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

m9-padding-height-2

padding: 0 2em이 적용됩니다.

결과

컨텐츠 영역

m9-padding-height-2
컨텐츠

코드

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

m9-padding-height-3

padding: 0 3em이 적용됩니다.

결과

컨텐츠 영역

m9-padding-height-3
컨텐츠

코드

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