Style paddingBottom รายละเอียด

การใช้งานและการกำหนด

paddingBottom ตั้งค่าหรือส่งกลับระยะของปริมาณด้านล่างขององค์ประกอบ。

คุณสมบัติ margin และ คุณสมบัติ padding ทั้งหมดใส่ช่องว่างรอบองค์ประกอบ แต่ความแตกต่างอยู่ที่ margin ใส่ช่องว่างรอบของเส้นขอบ และ padding ใส่ช่องว่างระหว่างเส้นขอบขององค์ประกอบ。

ดูเพิ่มเติม:

ตัวอย่าง CSS:CSS ระยะเข้าช่อง

คู่มือ CSS:คุณสมบัติ padding-bottom

คู่มือ HTML DOM:คุณสมบัติ padding

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าระยะของปริมาณด้านล่างขององค์ประกอบ <div>:

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

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ปลดปล่อยระยะของปริมาณด้านล่างขององค์ประกอบ <div> กลับเป็น "normal":

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

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

ส่งกลับระยะของปริมาณด้านล่างขององค์ประกอบ <div>:

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

ลองทดลองด้วยตัวเอง

ตัวอย่าง 4

ความแตกต่างระหว่าง marginBottom และ paddingBottom:

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

ลองทดลองด้วยตัวเอง

การใช้งาน

ส่งกลับคุณสมบัติ paddingBottom:

object.style.paddingBottom

ตั้งค่าคุณสมบัติ paddingBottom:

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

ค่าของคุณสมบัติ

ค่า คำอธิบาย
% กำหนดระยะของปริมาณด้านล่างด้วยเปอร์เซ็นต์ของความกว้างขององค์ประกอบพ่อ。
length กำหนดระยะของปริมาณด้านล่างด้วยหน่วยของความยาว。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial。
inherit ทำให้คุณสามารถทบทวนคุณสมบัตินี้จากองค์ประกอบพ่อของเรา โปรดดู inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: 0
ค่าที่ส่งกลับ: ข้อความสั้น แสดงว่าระยะของปริมาณด้านล่างขององค์ประกอบ。
CSS รุ่น: CSS1

การสนับสนุนโดยเครื่องเล่นบราวเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน