CSS 패딩 은 CSS 상자 모델 의 속성 중 하나입니다. 이 속기 속성은 HTML 요소의 네면 전체에 패딩을 설정합니다. CSS 패딩은 거의 모든 HTML 태그에 적용될 수 있습니다 (일부 테이블 태그 제외). 또한 요소의 네면이 모두 다른 값을 가질 수 있습니다.
CSS 패딩 속성
속기 CSS 패딩 속성을 사용하려면 니모닉 "TRouBLe"(또는 스타 트렉 팬을위한 "TRiBbLe")를 사용할 수 있습니다. 이것은 위 , 오른쪽 , 아래 및 왼쪽 을 의미하며 속기 속성에서 설정 한 패딩 너비의 순서를 나타냅니다. 예 :
패딩 : 오른쪽 위 왼쪽 아래; 패딩 : 1px 2px 3px 6px;위에 나열된 값을 사용하면 적용 할 HTML 요소의 모든면에 다른 패딩 값이 적용됩니다. 4면 모두에 동일한 패딩을 적용하려면 CSS를 단순화하고 하나의 값을 작성하면됩니다.
패딩 : 12px;이 CSS 라인을 사용하면 12 픽셀의 패딩이 요소의 4면 모두에 적용됩니다.
위쪽과 아래쪽과 왼쪽과 오른쪽에서 패딩을 동일하게하려면 두 값을 쓸 수 있습니다.
패딩 : 24x48 픽셀;첫 번째 값 (24 픽셀)은 위쪽과 아래쪽에 적용되고 두 번째 값은 왼쪽 및 오른쪽에 적용됩니다.
세 개의 값을 쓰면 위쪽과 아래쪽을 변경하면서 가로 채우기 (왼쪽 및 오른쪽)가 동일하게됩니다.
패딩 : 상단 오른쪽 및 하단; 패딩 : 0px 1px 3px;CSS 상자 모델에 따르면 패딩은 요소 / 콘텐츠 자체에 가장 가깝습니다. 즉, 콘텐츠 너비 또는 높이와 사용하는 모든 테두리 값 사이의 요소에 패딩이 추가됩니다. 패딩이 0으로 설정된 경우 내용과 동일한 가장자리를가집니다.
CSS 패딩 값
CSS 패딩은 음이 아닌 길이 값을 가질 수 있습니다. px 또는 em과 같은 측정 값을 지정해야합니다. 패딩에 대한 백분율을 지정할 수도 있습니다.이 값은 요소를 포함하는 블록의 너비에 대한 백분율입니다. 여기에는 상단 및 하단 패딩이 포함됩니다. 예 :
#container {width : 800px; 높이 : 200px; } #container p {width : 400px; 높이 : 75 %; 패딩 : 25 % 0; }#container 요소 내부 단락의 높이는 #container 의 높이의 75 %와 맨 위 패딩의 너비 25 % 및 아래쪽 패딩의 너비 25 %가됩니다. 총 300 + 200 + 200 = 700px입니다.
CSS 채우기 효과
블록 수준 요소 에서 패딩이 네면에 적용됩니다. 요소가 이미 블록 또는 상자이므로 패딩이 상자 측면에 적용됩니다.
인라인 요소에 CSS 패딩을 추가하면 세로 패딩이 줄 높이를 초과하지만 줄 높이를 낮추지 않으면 인라인 요소 위아래에 일부 요소가 겹칠 수 있습니다. 인라인 요소에 적용된 가로 방향 CSS 패딩이 요소의 시작 부분과 요소의 끝에 추가됩니다. 그리고 패딩이 선을 감쌀 수도 있습니다. 그러나 다중 행 요소의 모든 행에는 적용되지 않으므로 패딩을 사용하여 여러 행의 인라인 내용 세그먼트를 들여 쓸 수 없습니다.
또한 CSS2.1에서는 너비가 너비 (또는 채우기 너비)에 대한 백분율을 가진 요소에 따라 달라지는 컨테이너 블록을 만들 수 없습니다. 그렇게하면 결과가 정의되지 않습니다. 브라우저는 여전히 내용을 표시하지만 예상 한 결과를 얻지 못할 수 있습니다. 생각해 보면 컨테이너 요소가 미리 정의 된 너비를 가지지 않을 때와 같이 너비를 정의하기 위해 자식 요소의 너비를 알아야하는 것처럼 이해할 수 있습니다. 너비는 컨테이너 요소의 백분율로 설정되며, 이것은 대답이없는 원형 체인을 설정합니다. 문서의 너비에 백분율을 사용하는 경우 부모 요소 너비도 정의해야합니다.