CSS의 어떤 속성이 요소의 올바른 패딩을 지정합니까?

CSS에서 패딩 속성을 사용하면 HTML 요소의 테두리와 콘텐츠 사이에 추가 공간을 추가할 수 있습니다. 오른쪽 패딩은 요소 콘텐츠와 오른쪽 테두리 사이에 공백만 추가하는 것을 의미합니다.

여기에서는 요소의 올바른 패딩을 지정하는 두 가지 속성을 알아봅니다.

패딩 오른쪽 CSS 속성 사용

'padding-right' 속성은 CSS에서 요소의 올바른 패딩을 지정합니다. 요소에 오른쪽 패딩을 지정할 때마다 요소의 너비는 실제 너비 + 오른쪽 패딩과 같습니다.

문법

사용자는 아래 구문에 따라 요소의 올바른 패딩을 지정할 수 있습니다.

으아악

예 1

아래 예에서 상위 div에는 여러 하위 div가 포함되어 있습니다. "padding-right" CSS 속성을 사용하여 상위 div에 대해 "300px"의 오른쪽 패딩을 지정합니다. 또한 모든 하위 div 요소에 대해 100px의 패딩 오른쪽을 지정합니다.

출력에서 사용자는 오른쪽 테두리와 하위 div 사이에 300px 공간이 있음을 확인할 수 있습니다. 또한 오른쪽 테두리와 텍스트 내용 사이에는 100px의 여유 공간이 있습니다.

으아악

예 2

아래 예에서는 카드 구성 요소를 만들고 여기에 이미지를 추가했습니다. 또한 카드 div에 10px의 오른쪽 패딩을 지정했습니다. 출력에서 사용자는 오른쪽에 10px 공간을 관찰할 수 있습니다.

으아악

CSS 채우기 속성 사용

padding 속성은 요소의 네 면 모두에 패딩을 설정합니다. 오른쪽 패딩을 값으로 설정하고 다른 쪽을 0으로 설정할 수 있습니다. 첫 번째 값은 위쪽을 나타내고, 두 번째 값은 오른쪽을 나타내고, 세 번째 값은 아래쪽, 네 번째 값은 왼쪽을 나타냅니다. 따라서 두 번째 값을 제외하고 값으로 0을 유지하겠습니다.

문법

사용자는 패딩 CSS 속성을 사용하여 다음 구문에 따라 요소의 올바른 패딩을 지정할 수 있습니다.

으아악

예 3

아래 예에서는 카드 div를 추가하고 컨테이너 div 내부에 일부 텍스트를 추가했습니다. 또한 컨테이너 div 요소의 오른쪽에 "5rem" 패딩을 제공합니다. 사용자는 컨테이너 div의 오른쪽 테두리와 해당 콘텐츠 사이의 5rem 간격을 관찰할 수 있습니다.

으아악

사용자는 HTML 요소에 올바른 패딩을 지정하는 방법을 배우고 "padding-right" 또는 "padding" CSS 속성을 사용할 수 있습니다. padding 속성을 사용한다면 두 번째 값만 지정하고 나머지 값은 0으로 놔두면 됩니다.

위 내용은 CSS의 어떤 속성이 요소의 올바른 패딩을 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!