7) 속성-padding

들어가기 전에

박스 모델 강의에서 padding 영역은 border와 content 사이의 여백이라는 것에 대해 배웠습니다.

이번 강의에서는 padding의 세부 속성값을 적용하는 것을 중심으로 자세히 배워보도록 하겠습니다.

핵심키워드

padding-top
padding-right
padding-bottom
padding-left

학습하기

padding 속성

기본 값 : 0

< 속성 값 >

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.

padding-top content 영역의 위쪽 여백을 지정합니다.

padding-right content 영역의 오른쪽 여백을 지정합니다.

padding-bottom content 영역의 아래쪽 여백을 지정합니다.

padding-left content 영역의 왼쪽 여백을 지정합니다.

syntax

padding: [-top] [-right] [-bottom] [-left];
                   0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
                   0      10px     20px                 /* 좌, 우 같음 */
                   0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
                   0                                            /* 상, 우, 하, 좌 모두 같음 */

기본적으로 padding의 4가지 속성을 위와 같이 축약하여 사용할 수 있습니다.

속성의 순서는 고정되어있으며, 위쪽을 기준으로 시계방향으로 돌아간다고 생각하면 쉽습니다.

축약형으로 사용할 때 반드시 4개의 속성에 대한 값을 모두 적어야 하는 것은 아닙니다.

속성값은 1~4개의 값을 사용할 수 있으며 border에서는 축약형 사용 시 정의되지 않은 속성값에 대해서 기본값이 적용되었지만, padding은 조금 다른 방식으로 동작합니다.

그 이유는 상하, 좌우 영역의 값이 같을 때 하나로 합쳐서 적용할 수도 있기 때문입니다.

padding : 20px 30px 40px 30px 일 때, 좌우의 패딩 값이 같을 때 padding : 20px 30px 40px 와 같이 함축하여 사용할 수 있습니다.
padding : 20px 30px 20px 일 때, 좌우 패딩과 마찬가지로 상하의 패딩 값이 같을 때 padding : 20px 30px 와 같이 함축하여 사용 할 수 있습니다.
padding : 20px 20px ( = 20px, 20px, 20px, 20px )일 때, 상하좌우 패딩 값이 모두 같을 때 padding : 20px 와 같이 하나의 값으로 함축하여 사용할 수 있습니다.

* 참고 : CSS에서 0 값에 대해서는 단위를 따로 적지 않습니다.

0px = 0% = 0em = 0pt... => " 0 "

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>padding</title>
  <style>
    div {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 20px;


      /* 축약형 */
      padding: 10px 20px 40px;
    }
  </style>
</head>
<body>
    <div> css padding 속성 실습 </div>
</body>
</html>

참고자료

padding
https://developer.mozilla.org: The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for setting all individual paddings at once: padding-top, padding-right, padding-bottom, and padding-left.

비전공자를 위한 HTML/CSS

7) 속성-padding

수식 입력도움말

비전공자를 위한 HTML/CSS

comment

수식 입력도움말