Style paddingLeft 속성

정의 및 사용 방법

paddingLeft 속성을 설정하거나 요소의 왼쪽 내간격을 반환합니다。

margin 속성 그리고 padding 속성 모두 요소 주위에 공간을 삽입합니다. 하지만, 차이점은 margin이 테두리 주위에 공간을 삽입하는 반면, padding은 요소 테두리 내부에 공간을 삽입한다는 점입니다。

다른 참조도 볼 수 있습니다：

CSS 강의：CSS 내간격

CSS 참조 설명서：padding-left 속성

HTML DOM 참조 설명서：padding 속성

예제

예제 1

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

document.getElementById("myDiv").style.paddingLeft = "50px";

직접 테스트해 보세요

예제 2

<div> 요소의 왼쪽 내간격을 "normal"으로 되돌립니다：

document.getElementById("myDiv").style.paddingLeft = "0px";

직접 테스트해 보세요

예제 3

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

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

직접 테스트해 보세요

예제 4

marginLeft과 paddingLeft의 차이：

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

직접 테스트해 보세요

문법

paddingLeft 속성 반환：

object.style.paddingLeft

paddingLeft 속성 설정：

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

속성 값

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

기술 세부 사항

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

브라우저 지원

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