CSS(SCSS) - Padding(내부 여백)

1) CSS(SCSS) - Padding

• Padding 이란? Box 요소의 내부 공간(여백)을 지정하는 단축 속성을 말한다
  (요소 내부에 여백이 생기기 때문에 요소의 크기가 커지게 된다)

• 기본 : 0
  (내부 여백이 없으며 별도의 단위를 사용하지 않아도 적용은 되지만 만약 값이 1이라면 1px로 써야한다.)
• 단위 : px, vh, vw, em등의 단위로 지정
• % : 부모 요소의 가로 너비에 대한 비율로 지정

(1) Padding 사용 기준

1) Padding : 10px
-> 위, 오른쪽, 아래, 왼쪽으로 적용됨

padding : 10px;

2) Padding : 10px 20px
-> 위, 아래로 10px, 왼쪽, 오른쪽으로 20px으로 적용됨

padding : 10px 20px;

3) Padding : 10px 20px 30px
-> 위쪽은 10px, 왼쪽, 오른쪽은 20px, 아래쪽은 30px로 적용됨

padding : 10px 20px 30px;

4) Padding : 10px 20px 30px 40px
-> 위쪽은 10px, 오른쪽 20px, 아래쪽은 30px, 왼쪽은 40px이 적용됨

padding : 10px 20px 30px 40px;

Tip. Padding의 방향을 별도로 설정해서 사용할 수 있다.

1) Padding-top
2) Padding-right
3) Padding-bottom
4) Padding-left

(2) 사용 예

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 5px solid black;
}

.container .item:first-child {
  padding: 25px;
}

• 첫번째, 두번째 item 들이 있고 여기서 첫번째 item만 따로 padding의 20px을 적용시키고 싶다면? 가가상 선택자인 first-child를 사용해서 적용시키면 되고 그 반대로 2번째 item만 따로 padding의 30px을 적용시키고 싶다면?

...생략...
.container .item:last-child {
  padding: 25px;
}

• last-child를 사용해서 padding을 적용시키면 된다.