CSS margin-block-end ทาง属性

คำแนะนำหลักสูตร

margin-block-end คำอธิบายและวิธีใช้

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

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

ตัวอย่าง

ตัวอย่าง 1

กำหนดระยะทางด้านสิ้นสุดของบล็อค:

div {
  margin-block-end: 35px;
}

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

ตัวอย่าง 2

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

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

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

การเขียนภาษา CSS

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

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

ค่า รายละเอียด
auto ค่าเริ่มต้น
length

กำหนดระยะทาง หน่วยเป็น px, pt, cm และอื่น ๆ อนุญาตให้มีค่าลบ。

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

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

ค่าเริ่มต้น: auto
การสืบทอด: ไม่
การสร้างอนิมาชั่น: สนับสนุน。ดู:คุณสมบัติที่เกี่ยวกับอนิมาชั่น。
เวอร์ชัน: CSS3
การเขียนภาษา JavaScript: object.style.marginBlockEnd="20px"

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

ตัวเลขในตารางนี้ระบุว่าเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน。

เชิร์โม เอดจ์ ฟากซ์ แซฟารี่ โอเปร่า
87.0 87.0 41.0 12.1 73.0

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

อ้างอิง：CSS margin-block ทาง属性

อ้างอิง：CSS margin-block-start ทาง属性

อ้างอิง：CSS margin-bottom ทาง属性

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

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

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

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

อ้างอิง：CSS writing-mode ภาษี