คุณสมบัติ padding-inline-end
คุณสมบัติ padding-inline-end กำหนดระยะยืดภายในส่วนท้าย
ขององค์ประกอบตามแกนแถว (แนวนอน)
ไวยากรณ์
selector {
padding-inline-end: size;
}
ตัวอย่าง
ลองกำหนดระยะยืดภายในส่วนท้ายสำหรับองค์ประกอบย่อย
ตามแกนแถวเป็น 20px:
<div>
<p>ข้อความ</p>
</div>
div {
width: 400px;
height: 200px;
border: 1px solid black;
}
p {
padding-inline-end: 20px;
width: 100px;
height: 50px;
border: 1px solid red;
}
:
ตัวอย่าง
คราวนี้ลองกำหนดระยะยืดภายในส่วนท้ายสำหรับองค์ประกอบย่อย
ตามแกนแถวเป็น 20%:
<div>
<p>ข้อความ</p>
</div>
div {
width: 400px;
height: 200px;
border: 1px solid black;
}
p {
padding-inline-end: 20%;
width: 100px;
height: 50px;
border: 1px solid red;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
padding-inline-start,
ซึ่งกำหนดระยะยืดภายในส่วนเริ่มต้นขององค์ประกอบตามแกนแถว -
คุณสมบัติ
padding-block-end,
ซึ่งกำหนดระยะยืดภายในส่วนท้ายขององค์ประกอบตามแกนบล็อก -
คุณสมบัติ
padding-block-start,
ซึ่งกำหนดระยะยืดภายในส่วนเริ่มต้นขององค์ประกอบตามแกนบล็อก -
คุณสมบัติ
padding,
ซึ่งกำหนดระยะยืดภายใน -
คุณสมบัติ
margin-bottom,
ซึ่งกำหนดระยะห่างภายนอกด้านล่าง -
คุณสมบัติ
margin-left,
ซึ่งกำหนดระยะห่างภายนอกด้านซ้าย -
คุณสมบัติ
margin-right,
ซึ่งกำหนดระยะห่างภายนอกด้านขวา -
คุณสมบัติ
margin,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับการกำหนดระยะห่างภายนอก