CSS padding-inline-start thuộc性能

การใช้งานและการระบุ

ของอนุภาค padding-inline-start คุณสมบัตินี้หมายถึงช่องว่างที่มีจากเส้นตรงเข้มตัดถึงเนื้อหาในทิศทางแบบแถว

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

สัญญาณเตือน:คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode และ direction กำหนดทิศทางแบบแถว ซึ่งส่งผลให้มีผลบนตำแหน่งของอนุภาคในทิศทางแถวและทิศทางจบแถว รวมทั้ง padding-inline-start ผลลัพธ์ของคุณสมบัติ

ตัวอย่าง

ตัวอย่าง 1

กำหนดระยะทางของช่องว่างด้านหน้าในทิศทางแบบแถว

div {
  padding-inline-start: 50px;
}

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

ตัวอย่าง 2

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

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

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

ตัวอย่าง 3

ตั้งค่าของอนุภาค <div> ของคุณเป็น direction เมื่อค่าของคุณสมบัติ direction ตั้งเป็น rtl ทิศทางแบบแถวจะเป็นจากขวาไปทางซ้าย ผลลัพธ์คือตำแหน่งของอนุภาคจะเลื่อนจากซ้ายไปทางขวา:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

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

การเขียนรหัส CSS

padding-inline-start: auto|value|initial|inherit;

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

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

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

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

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

อ้างอิง：CSS แนวทาง

อ้างอิง：CSS padding-inline thuộc性能

อ้างอิง：CSS padding-inline-end thuộc性能

อ้างอิง：CSS padding-bottom thuộc性能

อ้างอิง：CSS padding-left thuộc性能

อ้างอิง：CSS padding-right thuộc性能

อ้างอิง：CSS padding-top thuộc性能

อ้างอิง：คุณได้ใช้ตัวแปร writing-mode ของ CSS