CSS 패딩 속성 사용 요소 내용과 요소 테두리 사이의 공간을 정의합니다. .
CSS 여백은 요소 주위의 공간을 정의하는 방식으로 CSS 여백과 다릅니다. CSS 패딩은 배경색의 영향을 받습니다. 콘텐츠 주변 영역을 지웁니다.
위쪽, 아래쪽, 왼쪽 및 오른쪽 패딩은 별도의 속성을 사용하여 독립적으로 변경할 수 있습니다. 단축 패딩 속성을 사용하면 모든 속성을 한 번에 변경할 수도 있습니다.
CSS 패딩 속성
| 재산 | 설명 |
|---|---|
| 심 | 하나의 선언에서 모든 패딩 속성을 설정하는 데 사용됩니다. |
| 패딩 왼쪽 | 요소의 왼쪽 여백을 설정하는 데 사용됩니다. |
| 패딩 오른쪽 | 요소의 오른쪽 패딩을 설정하는 데 사용됩니다. |
| 패딩탑 | 요소의 상단 패딩을 설정하는 데 사용됩니다. |
| 패딩 바닥 | 요소의 하단 패딩을 설정하는 데 사용됩니다. |
CSS 패딩 값
| 값 | 설명 |
|---|---|
| 길이 | pt, px, em 등의 고정 패딩을 정의하는 데 사용됩니다. |
| % | 포함된 요소의 % 단위로 패딩을 정의합니다. |
CSS 패딩 예
p { background-color: pink; } p.padding { padding-top: 50px; padding-right: 100px; padding-bottom: 150px; padding-left: 200px; } <p>This is a paragraph with no specified padding.</p> <p>This is a paragraph with specified paddings.</p> 지금 테스트해보세요 산출:
지정된 패딩이 없는 단락입니다.
지정된 패딩이 있는 단락입니다.