Thuộc tính paddingTop trong HTML DOM Style

Thuộc tính paddingTop của DOM được dùng để đặt padding (khoảng đệm) trên của một phần tử trong HTML. Nhớ rằng, padding chèn khoảng trống bên trong viền của phần tử. Nó cũng dùng để trả về padding trên. Giá trị mặc định là 0.

Cú pháp

Cú pháp như sau:

• Cú pháp trả về padding trên:

object.style.paddingTop

• Cú pháp đặt padding trên:

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

Ở đây, % là padding trên theo phần trăm, length là padding trên theo đơn vị độ dài (px, em, v.v.), initial dùng để đặt thuộc tính về giá trị mặc định và inherit dùng để kế thừa thuộc tính từ phần tử cha.

Ví dụ

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">Văn bản demo!</div> 
<br> 
<button type="button" onclick="demo()">Cập nhật</button> 
<script> 
    function demo() { 
        document.getElementById("sample").style.paddingTop = "80px"; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút Cập nhật, kết quả sau sẽ hiển thị. Chúng ta đã đặt padding trên dễ dàng dùng thuộc tính padding-top: