การกำหนด Padding ด้านซ้าย (padding-left) ใน CSS

บทนำ

คุณสมบัติ padding-left ใน CSS ใช้สำหรับกำหนด **ระยะห่างภายใน (Padding) ด้านซ้าย** ขององค์ประกอบ (Element) ระหว่างขอบ (Border) และเนื้อหา (Content)

ค่าที่รองรับ

• ความยาวคงที่: px, em, rem, pt, cm ฯลฯ
• เปอร์เซ็นต์ (%): คำนวณจาก **ความกว้างของบล็อกบรรจุ (Containing Block)**
• inherit - 繼承จาก Element พ่อ

ตัวอย่าง

<html>
    <head>
    </head>
    <body>
        <p style="padding-left: 20px; border: 2px solid blue;">
            This is demo content.
        </p>
        <p style="padding-left: 20%; border: 2px solid blue;">
            This is another demo content.
        </p>
    </body>
</html>

ผลลัพธ์

• ย่อหน้าแรก: ระยะห่างซ้าย 20 พิกเซล คงที่
• ย่อหน้าที่สอง: ระยะห่างซ้าย 20% ของความกว้าง Container

เคล็ดลับ: ใช้ padding-left ร่วมกับ box-sizing: border-box เพื่อควบคุมขนาด Box Model ได้แม่นยำกว่า