คุณสมบัติ HTML DOM Style paddingTop

คุณสมบัติ paddingTop ของ DOM ใช้สำหรับ ตั้งค่าหรือดึงค่า padding ด้านบน ของ element ใน HTML Padding คือพื้นที่ภายในขอบ (border) ของ element ค่าเริ่มต้นคือ 0

ไวยากรณ์ (Syntax)

ดึงค่า paddingTop:

object.style.paddingTop

ตั้งค่า paddingTop:

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

• % — เปอร์เซ็นต์ของความกว้าง containing block
• length — หน่วยความยาว (px, em, rem, cm, ฯลฯ)
• initial — ค่าเริ่มต้น (0)
• inherit — สืบทอดจากพาเรนต์

ตัวอย่างการใช้งาน

<!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()">อัปเดต</button>
<script>
  function demo() {
    document.getElementById("sample").style.paddingTop = "80px";
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิก: div มี paddingTop = 0 เนื้อหา "Demo text!" อยู่ชิดขอบบน

หลังคลิก "อัปเดต": paddingTop = 80px เนื้อหาลงมา 80px จากขอบบน

คำอธิบายโค้ด

• div มี id="sample" และ border แบบ dashed
• ปุ่ม "อัปเดต" เรียก demo()
• style.paddingTop = "80px" ตั้งค่า padding ด้านบน

คุณสมบัติ padding ทั้ง 4 ด้าน

หมายเหตุ: Padding เพิ่มพื้นที่ ภายใน border ส่วน margin เพิ่มพื้นที่ ภายนอก border