CSS margin-block ความสามารถ

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

margin-block attribute นี้กำหนดขอบด้านเริ่มต้นและจบของทิศทางบล็อค และเป็นชื่อย่อของattribute ต่อไปนี้:

margin-block ค่าของ属性 สามารถตั้งค่าด้วยวิธีต่าง ๆ :

ถ้ามีค่า margin-block สองค่า:

margin-block: 10px 50px;
  • ขอบนอกของมุมเริ่มต้นมีความเคลื่อนที่ 10px
  • 结束边缘的外边距为 50px

ระยะเวลาของขอบเขตสิ้นสุดเท่ากับ 50px

ถ้ามีค่า margin-block หนึ่ง:
  • margin-block: 10px;

คุณสมบัตินี้กำหนดระยะเวลาของขอบเขตเริ่มต้นและสิ้นสุดทั้งสองของ CSS margin-block margin-right คล้ายกันกับ margin-top margin-bottommargin-left、margin-leftและ margin-right และ margin-block คล้ายกันกับ margin-inline

คุณสมบัตินี้ขึ้นกับแนวบล็อคและแนวแบบวางข้อความ。แจ้งเตือน： writing-mode กำหนดแนวบล็อค。นี่จะส่งผลต่อตำแหน่งเริ่มต้นและสิ้นสุดของบล็อค และคุณสมบัติที่เกี่ยวข้องกับ CSS margin-block ผลของคุณสมบัติ。สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ แนวบล็อคคือทางลง และแนวแบบวางข้อความคือทางซ้ายไปขวา。

ตัวอย่าง

ตัวอย่าง 1

กำหนดระยะเวลาด้านบนและด้านล่างของแนวบล็อค

div {
  margin-block: 35px;
}

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

ตัวอย่าง 2

เมื่อ <div> องค์ประกอบ writing-mode เมื่อค่าของ writing-mode ตั้งเป็น vertical-rl จะทำให้ตำแหน่งเริ่มต้นขององค์ประกอบในแนวบล็อคย้ายจากด้านบนไปทางขวา และตำแหน่งสิ้นสุดขององค์ประกอบย้ายจากด้านล่างไปทางซ้าย การเปลี่ยนแปลงของ writing-mode ก็จะส่งผลต่อ margin-block ด้วย:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

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

ระบบการเขียน CSS

margin-block: auto|length|initial|inherit;

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

ค่า คำอธิบาย
auto ค่าเริ่มต้น
length

กำหนด margin-block ด้วยหน่วยมาตรเช่น px, pt, cm และอื่น ๆ สามารถใช้ค่าลบได้。

ดูต่อ：หน่วยทาง CSS。
% กำหนด margin-block ต่อเนื่องกับขนาดขององค์ประกอบพ่อในแนวแบบวางข้อความตามแนวตรง。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดูต่อ： initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา。ดูต่อ： inherit。

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

ค่าเริ่มต้น auto
การสืบทอด ไม่
การสร้างอนุกรมวิธี： สนับสนุน。ดูต่อ：คุณสมบัติที่เกี่ยวกับอนุกรมวิธี。
รุ่น： CSS3
ระบบการเขียนภาษาเจอวาสคริปต์： object.style.marginBlock="50px 20px"

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

ตัวเลขในตารางแสดงรุ่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

ครอม เอดจ์ ฟากซ์ เซฟาลี ออเปร่า
87.0 87.0 66.0 14.1 73.0

หน้าที่เกี่ยวข้อง

อ้างอิง：CSS margin-block-end ความสามารถ

อ้างอิง：CSS margin-block-start ความสามารถ

อ้างอิง：CSS margin-bottom ความสามารถ

อ้างอิง：CSS margin-inline รายละเอียด

อ้างอิง：CSS margin-left รายละเอียด

อ้างอิง：CSS margin-right รายละเอียด

อ้างอิง：CSS margin-top รายละเอียด

อ้างอิง：CSS writing-mode thuộc tính