CSS 패딩

CSS Padding

CSS Padding 속성은 요소의 테두리와 내용 사이의 공간을 정의합니다.

Padding

요소의 Padding(패딩)이 지워지면 "해제된" 영역이 해당 요소의 배경색으로 채워집니다.

채우기 속성만 사용하여 위쪽, 아래쪽, 왼쪽, 오른쪽 패딩을 변경할 수 있습니다. 약어 채우기 속성을 사용할 수도 있습니다. 일단 변경되면 모든 것이 변경됩니다.

이 단축 속성은 요소의 모든 패딩 너비를 설정하거나 각 측면의 패딩 너비를 설정합니다. 인라인, 대체되지 않은 요소에 설정된 패딩은 줄 높이 계산에 영향을 주지 않습니다. 따라서 요소에 패딩과 배경이 모두 있는 경우

다른 콘텐츠가 겹칠 가능성이 있어 시각적으로 다른 줄로 확장될 수 있습니다. 요소의 배경은 패딩을 가로질러 확장됩니다. 음수 여백 값은 허용되지 않습니다.

padding-top:20px; 상단 패딩

padding-right:30px; 오른쪽 패딩

하단 패딩

padding-left:20px; 왼쪽 패딩

padding: 4면 모두 1px 통합 패딩

padding: 1px 상하, 왼쪽 및 오른쪽 패딩

패딩: 1px1px1px 상단, 왼쪽 및 오른쪽, 하단 패딩

패딩: 1px1px1px1px 상단, 오른쪽, 하단, 왼쪽 패딩

참고: 음수 값은 허용되지 않습니다.

가능한 값

auto: 브라우저가 여백을 계산합니다.

length: 픽셀, 센티미터 등과 같은 특정 단위로 여백 값을 지정합니다. 기본값은 0px입니다.

%: 여백을 상위 요소 너비의 백분율로 지정합니다.

inherit: 여백이 상위 요소에서 상속되도록 지정합니다.

padding: 약어 속성을 사용하여 하나의 선언에 모든 ​​패딩 속성을 설정

padding-bottom: 요소의 하단 패딩 설정

padding-left: 왼쪽 부분 설정 요소의 Padding

padding-right: 요소의 오른쪽 패딩 설정

padding-top: 요소의 위쪽 패딩 설정