====== CSS Padding ======
<WRAP left notice 80%>
  * description : CSS Padding
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-05
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_padding.asp|CSS Padding]]
\\
\\
======CSS Padding======
패딩은 정의된 어떤 테두리 안에서 한 요소의 콘텐츠 주위에 공간을 만드는데 사용됩니다.\\
\\
CSS로 패딩을 완전히 조절할 수 있습니다. 한 요소의 각각의 측면 (상단, 우측, 하단, 좌측)에 대한 패딩을 설정하는 속성들이 있습니다.\\
\\
======Padding - Individual Sides======
CSS에는 한 요소의 각각의 측면에 대한 패딩을 지정하는 속성들이 있습니다.\\
  * padding-top
  * padding-right
  * padding-bottom
  * padding-left
모든 패딩 속성들은 하기의 값을 가질 수 있습니다.\\
  * length - px, pt, cm 등의 단위로 패딩을 지정합니다.
  * % - 포함하고 있는 요소의 너비의 백분율로 패딩을 지정합니다.
  * inherit - 부모 요소에서 상속받는 패딩을 지정합니다. 
    * Note : 음수는 허용되지 않습니다.
====예제====
<div> 요소의 모든 4개 측면에 대한 다른 패딩을 설정합니다.
<code css>
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</code>
\\
\\
======Padding - Shorthand Property======
코드를 줄이기 위해, 하나의 속속에서 모든 패딩 속성들을 지정하는 것이 가능합니다.\\
''padding''속성은 하기의 패딩 속성들 각각에 대한 shorthand 속성입니다.
  * padding-top
  * padding-right
  * padding-bottom
  * padding-left
작동 원리는 하기와 같습니다.\\
\\
  * 패딩 속성이 4개의 값을 갖는 경우
  ====padding:25px 50px 75px 100px;====
    * top padding: 25px
    * right padding: 50px
    * bottom padding: 75px
    * left padding: 100px
====예제====
4개의 값을 가지는 shorthand 속성을 사용합니다.\\
<code css>
div {
  padding: 25px 50px 75px 100px;
}
</code>
\\ 
  * 패딩 속성이 3개의 값을 갖는 경우
  ====padding:25px 50px 75px;====
    * top padding: 25px
    * right and left padding: 50px
    * bottom padding: 75px
====예제====
3개의 값을 가지는 shorthand 속성을 사용합니다.\\
<code css>
div {
  padding: 25px 50px 75px;
}
</code>
\\ 
  * 패딩 속성이 2개의 값을 갖는 경우
  ====padding:25px 50px;====
    * top and bottom padding: 25px
    * right and left padding: 50px
====예제====
2개의 값을 가지는 shorthand 속성을 사용합니다.\\
<code css>
div {
  padding: 25px 50px;
}
</code>
\\ 
  * 패딩 속성이 1개의 값을 갖는 경우
  ====padding:25px;====
    * 모든 4개의 padding: 25px
====예제====
1개의 값을 가지는 shorthand 속성을 사용합니다.\\
<code css>
div {
  padding: 25px;
}
</code>
\\
\\
======Padding and Element Width====== 
CSS ''width'' 속성은 요소의 콘텐츠 영역 너비를 지정합니다. 콘텐츠 영역은 패딩(padding), 테두리(border) 그리고 여백(margin) 내부의 부분입니다.\\
\\
그래서 한 요소가 지정된 너비를 가지는 경우, 그 요소에 추가되는 패딩은 해당 요소의 총 너비에 추가됩니다. 이것은 종종 바람직하지 않는 결과입니다.\\
====예제====
<div> 요소에 300px의 너비가 주어집니다. 하지만 <div> 요소의 실제 너비는 350px (300px + 좌측 패딩 25px + 우측 패딩 25px)입니다.\\
<code css>
div {
  width: 300px;
  padding: 25px;
</code> 
\\
패딩의 합계에 상관없이 너비 300px을 유지하기 위해, **''box-sizing''**속성을 사용할 수 있습니다.\\
이 **''box-sizing''**속성은 해당 요소가 너비를 유지하게 합니다; 패딩 간격을 늘리는 경우, 이용할 수 있는 콘텐츠 공간은 감소합니다.\\
====예제====
패딩 간격 합계에 상관없이 너비 300px을 유지하기 위해, **''box-sizing''**속성을 사용합니다.\\
<code css>
div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;  // 제일 중요합니다.
}
</code>
\\
\\
=====All CSS Padding Properties=====
^ Property        ^ Description                            ^
| padding         | 하나의 선언에서 모든 패딩 속성들을 설정하는 shrothand 속성  |
| padding-bottom  | 한 요소의 하단 패딩을 설정합니다.                    |
| padding-left    | 한 요소의 좌측 패딩을 설정합니다.                    |
| padding-right   | 한 요소의 우측 패딩을 설정합니다.                    |
| padding-top     | 한 요소의 상단 패딩을 설정합니다.                    |
      










{{tag>오션, CSS Padding, }}