DOM의 paddingTop 속성은 HTML에서 요소의 상단 패딩을 설정하는 데 사용됩니다. 요소의 경계 내에 공백을 삽입한다는 것을 기억하십시오. 또한 상단 패딩을 반환하는 데 사용됩니다. 기본값은 0입니다.
구문
다음은 구문입니다 -
- 상단 패딩을 반환하는 구문
object.style.paddingTop
- 상단 패딩을 설정하는 구문
object.style.paddingTop = "%|length|initial|inherit"
여기서 %는 상단 패딩, 길이 입니다. 길이(단위)의 상단 패딩, 초기 속성을 기본값으로 설정하는 데 사용되며 상속은 상속 하는 데 사용됩니다. 속성 양식 부모 요소입니다.
예시
이제 paddingTop 속성을 구현하는 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#sample {
border: 2px dashed #ded575;
}
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
function demo() {
document.getElementById("sample").style.paddingTop = "80px";
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
위의 업데이트 버튼을 클릭하면 다음이 표시됩니다. padding-top 속성을 사용하여 이제 상단 패딩을 쉽게 설정했습니다 -
