Thuộc tính paddingTop của DOM được sử dụng để đặt phần đệm trên cùng của một phần tử trong HTML. Hãy nhớ rằng, chèn khoảng trắng trong đường viền của một phần tử. Nó cũng được sử dụng để trả lại phần đệm trên cùng. Giá trị mặc định là 0.
Cú pháp
Sau đây là cú pháp -
- Cú pháp để trả về phần đệm trên cùng
object.style.paddingTop
- Cú pháp để đặt phần đệm trên cùng
object.style.paddingTop = "%|length|initial|inherit"
Ở đây,% là phần đệm trên cùng, chiều dài là phần đệm trên cùng về độ dài (đơn vị), chữ cái đầu được sử dụng để đặt thuộc tính thành giá trị mặc định và kế thừa được sử dụng để kế thừa phần tử mẹ của biểu mẫu thuộc tính.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để triển khai thuộc tính 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút Cập nhật ở trên, phần sau sẽ hiển thị. Chúng tôi đã dễ dàng đặt phần đệm trên cùng bằng cách sử dụng thuộc tính padding-top -
