ตัวอย่าง
ตั้งทั้งสี่อัตรากำไรขั้นต้นของ <div> องค์ประกอบ:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px"; ลองตัวเอง» ความหมายและการใช้งาน
ชุดคุณสมบัติอัตรากำไรหรือผลตอบแทนที่อัตรากำไรขั้นต้นของธาตุนั้น
คุณสมบัตินี้อาจใช้เวลา 1-4 ค่า:
- ค่าหนึ่งที่ชอบ: div {margin: 50px} - ทั้งสี่อัตรากำไรขั้นต้นจะ 50px
- สองค่าเช่น: div {margin: 50px 10px} - ด้านบนและด้านล่างอัตรากำไรขั้นต้นจะ 50px, ขอบซ้ายและขวาจะ 10px
- สามค่าที่ชอบ: div {margin: 50px 10px 20px} - ระยะขอบด้านบนจะเป็น 50px ซ้ายและขอบขวาจะ 10px ขอบด้านล่างจะเป็น 20px
- สี่ค่าเช่น: div {margin: 50px 10px 20px 30px} - ระยะขอบด้านบนจะเป็น 50px, ขอบขวาจะ 10px ขอบด้านล่างจะเป็น 20px, ขอบด้านซ้ายจะเป็น 30px
ทั้งคุณสมบัติและอัตรากำไรขั้นต้นพื้นที่แทรกคุณสมบัติ padding รอบองค์ประกอบ อย่างไรก็ตามความแตกต่างคือการที่อัตรากำไรแทรกพื้นที่รอบ ๆ ชายแดนในขณะที่ช่องว่างแทรกพื้นที่ภายในเส้นขอบของสิ่งนั้น ๆ
สนับสนุนเบราว์เซอร์
คุณสมบัติที่อัตรากำไรขั้นต้นได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด
วากยสัมพันธ์
คืนทรัพย์สินขอบ:
object .style.margin
ตั้งค่าคุณสมบัติขอบ:
object .style.margin=" ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ % กำหนดอัตรากำไรขั้นต้นใน% ของความกว้างขององค์ประกอบหลักที่ length กำหนดอัตรากำไรขั้นต้นในหน่วยความยาว auto เบราว์เซอร์ชุดขอบ (all four margins will be equal) initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: 0 กลับค่า: เชือกหรือคิดเป็นอัตรากำไรขั้นต้นของธาตุนั้น CSS รุ่น CSS1
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนทั้งสี่อัตรากำไรขั้นต้นของ <div> องค์ประกอบ "25px" :
document.getElementById("myDiv").style.margin = "25px";
ลองตัวเอง»
ตัวอย่าง
กลับขอบของที่ <div> องค์ประกอบ:
alert(document.getElementById("myDiv").style.margin);
ลองตัวเอง»
ตัวอย่าง
ความแตกต่างระหว่างคุณสมบัติขอบและทรัพย์สิน padding นี้:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
ลองตัวเอง»
หน้าเว็บที่เกี่ยวข้อง
CSS กวดวิชา: CSS Margin
อ้างอิง CSS: margin property
<สไตล์วัตถุ