CSS inline-size คุณสมบัติ

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

inline-size คุณสมบัติกำหนดขนาดของตัวอนุญาโตในทางด้านภายใน

หมายเหตุ:คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode กำหนดทางด้านภายใน ซึ่งส่งผลต่อ inline-size ผลลัพธ์ของคุณสมบัติ

CSS inline-size และ block-size คุณสมบัติเกี่ยวข้องกับ CSS width และ height คุณสมบัติเหมือนกันมาก แต่ inline-size และ block-size คุณสมบัตินี้ขึ้นอยู่กับทางด้านภายในและทางด้านแบบ

ตัวอย่าง

ตัวอย่าง 1

กำหนดขนาดของตัวอนุญาโต <div> ในทางด้านภายใน:

div {
  inline-size: 200px;
}

ทดลองเอง

ตัวอย่าง 2

เมื่อตัวอนุญาโต <div> มี writing-mode ค่าที่ตั้งค่า vertical-rl ในขณะที่ inline-size inline-size วิธีที่คุณสมบัติทำงาน:

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

ทดลองเอง

การใช้งานภาษา CSS

inline-size: auto|length|initial|inherit;

ค่าทางตัวเลือก

ค่า รายละเอียด
auto ค่าเริ่มต้น. ค่า inline-size ที่มีในปริมาณตัวอนุญาโต
length

กำหนดขนาดทางด้านภายในโดยใช้หน่วยที่เป็น px, pt, cm และอื่น ๆ

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

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

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

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

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

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

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

CSS อบรม:CSS ความสูงและความกว้าง

CSS อบรม:CSS โมเดลโฟน

CSS อ้างอิง:คุณสมบัติ height

CSS อ้างอิง:คุณสมบัติ width

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