내여백(padding)

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

소개

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

.m9-padding-1

padding:1em 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-1
컨텐츠

코드

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

.m9-padding-2

padding:2em 이 적용됩니다.

결과

컨텐츠 영역

m9-padding-2
컨텐츠

코드

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

.m9-padding-3

padding:3em 이 적용됩니다.

결과

컨텐츠 영역11

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

코드

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

.m9-padding-width-1

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

결과

컨텐츠 영역

m9-padding-width-1
컨텐츠

코드

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

.m9-padding-width-2

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

결과

컨텐츠 영역

m9-padding-width-2
컨텐츠

코드

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

.m9-padding-width-3

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

결과

컨텐츠 영역

m9-padding-width-3
컨텐츠

코드

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

.m9-padding-height-1

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

결과

컨텐츠 영역

m9-padding-height-1
컨텐츠

코드

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

.m9-padding-height-2

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

결과

컨텐츠 영역

m9-padding-height-2
컨텐츠

코드

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

.m9-padding-height-3

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

결과

컨텐츠 영역

m9-padding-height-3
컨텐츠

코드

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