คุณสมบัติ Style marginTop

การระบุและการใช้งาน

marginTop ตั้งค่าหรือส่งกลับความสูงของเนื้อหาด้านบนขององค์ประกอบ

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

ดูเพิ่มเติม

ตัวอย่าง CSSCSS ขอบเขตด้านนอก

คู่มือ CSSคุณสมบัติ margin-top

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

ตัวอย่าง

ตัวอย่าง 1

ปลดเซ็ตความสูงของเนื้อหาด้านบนของ <div>：

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

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

ตัวอย่าง 2

ปลดเซ็ตความสูงของเนื้อหาด้านบนของ <div> กลับเป็น "normal"：

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

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

ตัวอย่าง 3

ส่งกลับความสูงของเนื้อหาด้านบนของ <div> ตัวนี้：

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

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

ตัวอย่าง 4

ต่างระหว่าง marginTop และ paddingTop：

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

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

ภาษาบทบัญญัติ

ส่งกลับคุณสมบัติ marginTop：

object.style.marginTop

ตั้งค่าคุณสมบัติ marginTop：

object.style.marginTop = "%|length|auto|initial|inherit"

ค่าที่ใช้ในคุณสมบัติ

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

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

ค่าเริ่มต้น： 0
ค่าที่ส่งกลับมา： ข้อความตัวอักษร，ที่แสดงความสูงของเนื้อหาด้านบนขององค์ประกอบ。
เวอร์ชั่น CSS： CSS1

บราวน์เซอร์สนับสนุน

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