[CSS] Padding

와썹 동기 가이즈! 오늘은 패딩에 대해 알아보도록 합시다!

 

Padding

위의 그림과 같이 패딩은 경계(border)와 내용(content)사이에 있는 공간을 나타냅니다.

 

---

 

코드에서의 padding

p {
  border: thick solid teal;
  padding: 30px;
  width: 7.5rem;
}

위 코드를 실행 하면 아래와 같은 모습

padding: 30px;

 

padding을 없애고 실행하면 이런 모습이 됩니다.

padding: none;

 

---

 

방향에 따른 프로퍼티 설정

padding: 30px;로 코드를 설정하면 네 방향으로 30px씩 빈공간을 만들지만 padding-top: 30px;로 코드를 설정하면 윗 방향으로 30px의 빈공간을 만듭니다.

 

프로퍼티	설명
padding-top	내용 위쪽으로 빈공간을 만들고 싶을 때
padding-right	내용 오른쪽으로 빈공간을 만들고 싶을 때
padding-bottom	내용 아래쪽으로 빈공간을 만들고 싶을 때
padding-left	내용 왼쪽으로 빈공간을 만들고 싶을 때

 

---

 

방향에 따른 값 설정

padding: 6px 10px 14px 4px;로 코드를 작성하면 순서대로 위쪽, 오른쪽, 아래쪽, 왼쪽의 값을 정할 수 있습니다. 

 

프로퍼티: 값	설명 (모두 순서대로)
padding: 1px;	네 방향 모두 적용
padding: 5px 5px;	세로 방향, 가로 방향 적용
padding: 7px 3em 10px;	위 방향, 가로방향, 아래 방향
padding: 10px 10% 5em 10rem;	위쪽, 오른쪽, 아래쪽, 왼쪽

 

 

---

 

오늘의 느낌

집에 햄버거 빵이 있어서 오랜만에 딸기잼 발라서 우유 부어서 먹었는데 와우! 정말 맛있었다. 단백질을 위해 아몬드도 좀 넣었는데 식감도 살아서 맛있었다. 언제 건빵 살일 있으면 건브레이크도 해먹어야쥐이~