====== CSS Margins ======
<WRAP left notice 80%>
  * description : CSS Margins
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-05
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_margin.asp|CSS Margins]]
\\
\\
======CSS Margins======
CSS ''margins(여백)''속성은 어떤 정의된 테두리 외부의, 요소들의 주위 공간을 만드는데 사용됩니다.\\
CSS로 여백을 완전히 제어할 수 있습니다. 한 요소의 각각의 측면 (상, 우, 하, 좌)에 대한 여백을 설정하는 속성들이 있습니다.\\
\\
======Margin - Individual Sides=====
CSS에는 한 요소의 각각의 측면에 대한 여백을 지정하는 속성이 있습니다.\\
  * margin-top
  * margin-right
  * margin-bottom
  * margin-left
모든 여백 속성들을 하기의 값을 가질 수 있습니다.\\
  * auto - 브라우저가 여백을 계산합니다
  * length - px, ot, cm 등으로 여백을 지정합니다.
  * % - 포함하고 있는 요소의 너비에 대한 백분율로 여백을 지정합니다.
  * inherit -  여백을 부모 요소로부터 상속받도록 지정합니다.
    * Tip : 음수 값이 허용됩니다.
====예제====
<p> 요소의 모든 4개 측면에 대한 다른 여백을 지정합니다.
<code css>
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
</code>
\\
\\
======Margin - Shorthand Property======
코드를 줄이기 위해, 하나의 속성에서 모든 여백 속성을 지정할 수 있습니다.\\
''margin''속성은 다음의 개별 여백 속성들에 대한 shorthand 속성입니다.\\
  * margin-top
  * margin-right
  * margin-bottom
  * margin-left
작동 원리는 다음과 같습니다.\\
여백 속성에 4개의 값이 있는 경우:\\
  * margin: 25px 50px 75px 100px;
     * top margin: 25px
     * right margin: 50px
     * bottom margin: 75px
     * left margin: 100px
====예제====
4개의 값을 가진 여백 shorthand 속성을 사용합니다.
<code css>
p {
  margin: 25px 50px 75px 100px;
}
</code>
\\
여백 속성에 3개의 값이 있는 경우:\\
  * margin: 25px 50px 75px;
     * top margin: 25px
     * right and left margin: 50px
     * bottom margin: 75px
====예제====
3개의 값을 가진 여백 shorthand 속성을 사용합니다.
<code css>
p {
  margin: 25px 50px 75px;
}
</code>
\\
여백 속성에 2개의 값이 있는 경우:\\
  * margin: 25px 25px;
     * top and bottom margins: 25px
     * right and left margins: 50px
====예제====
2개의 값을 가진 여백 shorthand 속성을 사용합니다. 
<code css>
p {
  margin: 25px 50px;
}
</code>
\\
여백 속성에 1개의 값이 있는 경우:\\
  * margin: 25px;
     * 모든 4개의 여백 : 25px
====예제====
<code css>
p {
  margin: 25px;
}
</code> 
\\
\\
======The auto Value======
margin 속성을 ''auto''로 설정하여 컨테이너 내에서 요소를 가로로 중앙에 배치할 수 있습니다.\\
그 요소는 지정된 너비를 차지하고, 남은 공간은 좌측, 우측 여백 사이에서 균등하게 배분됩니다.\\
====예제====
여백 auto 속성 사용하기\\
<code css>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
</code>
\\
\\
======The Inherit Value======
하기 예제는 <p class="ex1">요소의 왼쪽 여백이 부모 요소 ( <div> )에서 상속받게 합니다.\\
====예제====
inherit 값을 사용합니다.
<code css>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</code>
\\
\\
======CSS Margin Collapse======
때때로 두 개의 여백이 단일 여백으로 축소됩니다.\\
요소들의 상단 여백과 하단 여백이 때로는 두 개의 여백 중에서 가장 큰 여백과 동일한 단일 여백으로 축소됩니다.\\
이것은 좌측 여백과 우측 여백에서는 발생하지 않습니다. 오직 상단 여백과 하단 여백에서만 발생합니다.\\
====예제====
<code css>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</code>
\\
  * 상기에서 <h1>은 하단 여백 50px를 가지고, <h2>는 상단 여백 20px를 가진다. 상식적으로 h1과 h2 사이에는 세로로 70px의 여백을 있어야 하지만, margin collapse때문에 실제 여백은 50px이다.
\\
=====All CSS Margin Properties=====
^ Property       ^ Description                            ^
| margin         | 하나의 선언에서 여백 속성들을 설정하기 위한 shorthand 속성  |
| margin-bottom  | 한 요소의 하단 여백을 설정합니다.                    |
| margin-left    | 한 요소의 좌측 여백을 설정합니다.                    |
| margin-right   | 한 요소의 우측 여백을 설정합니다.                    |
| margin-top     | 한 요소의 상단 여백을 설정합니다.                    |







{{tag>오션, CSS Margins. Margin Collapse}}