외여백(margin)

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

소개

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

.m9-margin-1

margin:1em 이 적용됩니다.

결과

컨텐츠 영역

m9-margin-1
컨텐츠

코드

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

.m9-margin-2

margin:2em 이 적용됩니다.

결과

컨텐츠 영역

m9-margin-2
컨텐츠

코드

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

.m9-margin-3

margin:3em 이 적용됩니다.

결과

컨텐츠 영역11

m9-margin-3(외여백:3em)
컨텐츠

코드

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

.m9-margin-width-1

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

결과

컨텐츠 영역

m9-margin-width-1
컨텐츠

코드

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

.m9-margin-width-2

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

결과

컨텐츠 영역

m9-margin-width-2
컨텐츠

코드

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

.m9-margin-width-3

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

결과

컨텐츠 영역

m9-margin-width-3
컨텐츠

코드

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

.m9-margin-height-1

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

결과

컨텐츠 영역

m9-margin-height-1
컨텐츠

코드

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

.m9-margin-height-2

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

결과

컨텐츠 영역

m9-margin-height-2
컨텐츠

코드

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

.m9-margin-height-3

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

결과

컨텐츠 영역

m9-margin-height-3
컨텐츠

코드

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