Style padding 속성

정의와 사용법

padding 속성은 요소의 내간격을 설정하거나 반환합니다.

이 속성은 하나에서 네 개의 값을 취할 수 있습니다:

margin 속성 와 padding 속성 요소 주위에 공간을 삽입합니다. 그러나, 차이점은 margin이 테두리 주위에 공간을 삽입하는 반면 padding이 요소 테두리 내부에 공간을 삽입한다는 것입니다

  • 한 가지 값이 있으며 예를 들어: div {padding: 50px} - 모든 네 가지 면에 50px의 내간격이 됩니다
  • 두 가지 값이 있으며 예를 들어: div {padding: 50px 10px} - 상하 내간격은 50px, 좌우 내간격은 10px가 됩니다
  • 세 가지 값, 예를 들어: div {padding: 50px 10px 20px} - 상 내간격이 50px, 좌우 내간격이 10px, 하 내간격이 20px
  • 네 가지 값, 예를 들어: div {padding: 50px 10px 20px 30px} - 상 내간격이 50px, 우 내간격이 10px, 하 내간격이 20px, 좌 내간격이 30px

추가로 참조하십시오：

CSS 강의：CSS 내간격

CSS 참조 설명서：padding 속성

예제

예제 1

<div> 요소의 내간격 설정：

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

직접 시도해 보세요

예제 2

<div> 요소의 모든 네 가지 가장자리의 내간격을 "25px"으로 변경합니다：

document.getElementById("myDiv").style.padding = "25px";

직접 시도해 보세요

예제 3

반환 <div> 요소의 내간격：

alert(document.getElementById("myDiv").style.padding);

직접 시도해 보세요

예제 4

margin 속성과 padding 속성의 차이：

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

직접 시도해 보세요

문법

padding 속성 반환：

object.style.padding

padding 속성 설정：

object.style.padding = "%|length|initial|inherit"

속성 값

값 설명
% 부모 요소의 너비의 백분율로 내간격을 정의합니다.
length 길이 단위로 내간격을 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 0
반환 값： 문자열로, 요소의 내간격을 나타냅니다.
CSS 버전： CSS1

브라우저가 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원