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

การอธิบายและการใช้งาน

margin-block-start คุณสมบัตินี้กำหนดระยะทางเริ่มต้นของทิศทางบล็อค。

CSS margin-block และ margin-inline คล้ายกันกับคุณสมบัติของ CSS margin-top,margin-bottom,margin-left และ margin-right คล้ายกันมาก แต่ margin-block และ margin-inline คุณสมบัตินี้ขึ้นอยู่กับทิศทางบล็อคและทิศทางแถว。

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

ตัวอย่าง

ตัวอย่าง 1

กำหนดระยะทางเริ่มต้นของบล็อค:

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

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

ตัวอย่าง 2

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

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

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

การเขียนโค้ด CSS

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

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

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

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

ค่าเริ่มต้น: auto
การสืบทอด: ไม่
การสร้างอนุรักษ์: สนับสนุน。ดูเพิ่มเติมที่:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์。
รุ่น: CSS3
การเขียนโค้ดจาวาสคริปต์: object.style.marginBlockStart="100px"

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

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

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

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

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

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

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

อ้างอิง：CSS margin-inline ทางแบบ

อ้างอิง：CSS margin-left ทางแบบ

อ้างอิง：CSS margin-right ทางแบบ

อ้างอิง：CSS margin-top ทางแบบ

อ้างอิง：CSS writing-mode คุณสมบัติ