---
title: margin & padding
date: 2017-08-07 16:29:09
tags:
categories: Layout
---

각 Element의 간격을 조절할 때 사용되는 Class입니다. 특정한 규칙을 적용해 원하는 간격을 설정할 수 있으며,
`&lt;div class="속성-적용범위-값"&gt;` 형태로 사용됩니다.

- 속성 : margin / padding
- 적용범위 : top / bottom / left / right / h(top&bottom) / w(left&right)
- 값 : 0 ~ 100, auto(속성 margin 일 때만 적용가능)

<pre>
  <code class="html">
&lt;div class="margin-top-50"&gt;&lt;/div&gt;
&lt;div class="margin-bottom-50"&gt;&lt;/div&gt;
&lt;div class="margin-left-50"&gt;&lt;/div&gt;
&lt;div class="margin-right-50"&gt;&lt;/div&gt;
&lt;div class="margin-h-50"&gt;&lt;/div&gt;
&lt;div class="margin-w-50"&gt;&lt;/div&gt;
&lt;div class="margin-w-auto"&gt;&lt;/div&gt;

&lt;div class="padding-top-50"&gt;&lt;/div&gt;
&lt;div class="padding-bottom-50"&gt;&lt;/div&gt;
&lt;div class="padding-left-50"&gt;&lt;/div&gt;
&lt;div class="padding-right-50"&gt;&lt;/div&gt;
&lt;div class="padding-h-50"&gt;&lt;/div&gt;
&lt;div class="padding-w-50"&gt;&lt;/div&gt;
  </code>
</pre>
