CSS inset-block รายการ

คำนิยามและวิธีใช้

inset-block ระยะห่างขององค์ประกอบค่าที่ตั้งค่ากับระยะห่างทางแนวบล็อคของตัวปลายทางพ่อเล่ม

แนะนำ:เพื่อให้คุณสมบัตินี้ทำงานได้ ต้องกำหนด position 属性。

inset-block คุณสมบัตินี้เป็นรูปแบบย่อของคุณสมบัติต่อไปนี้:

• inset-block-start
• inset-block-end

inset-block ค่าของคุณสมบัติสามารถตั้งค่าด้วยวิธีต่าง ๆ:

หากคุณสมบัติ inset-block มีค่าสองค่า:

inset-block: 10px 50px;

• ระยะทางเริ่มต้นที่ 10px
• ระยะทางจบที่ 50px

หากคุณสมบัติ inset-block มีค่าเดียว:

inset-block: 10px;

• ระยะทางเริ่มต้นและจบที่ 10px

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

แนะนำ:คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode กำหนดทิศทางบล็อค。 inset-block ผลลัพธ์ของคุณสมบัติ。

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าระยะทางขององค์ประกอบ <div> ที่มีการติดตั้งตำแหน่งในทิศทางบล็อค:

div {
  inset-block: 10px 50px;
}

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

ตัวอย่าง 2

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

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

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

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

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

ค่าทางภาพ

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

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

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

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

การเรียนรู้：CSS การจัดตัว

อ้างอิง：CSS position คุณสมบัติ

อ้างอิง：CSS inset-block-end รายการ

อ้างอิง：CSS inset-block-start รายการ

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