CSS
[CSS] Padding
Dongi
2021. 12. 29. 11:56
와썹 동기 가이즈! 오늘은 패딩에 대해 알아보도록 합시다!
Padding
위의 그림과 같이 패딩은 경계(border)와 내용(content)사이에 있는 공간을 나타냅니다.
코드에서의 padding
p {
border: thick solid teal;
padding: 30px;
width: 7.5rem;
}위 코드를 실행 하면 아래와 같은 모습
padding을 없애고 실행하면 이런 모습이 됩니다.
방향에 따른 프로퍼티 설정
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; | 위쪽, 오른쪽, 아래쪽, 왼쪽 |
오늘의 느낌
집에 햄버거 빵이 있어서 오랜만에 딸기잼 발라서 우유 부어서 먹었는데 와우! 정말 맛있었다. 단백질을 위해 아몬드도 좀 넣었는데 식감도 살아서 맛있었다. 언제 건빵 살일 있으면 건브레이크도 해먹어야쥐이~