วิธีใช้งาน CSS Padding Property

เรียนรู้วิธีใช้งานคุณสมบัติ padding ใน CSS

คุณสมบัติ padding ใน CSS ใช้ควบคุมปริมาณพื้นที่ ภายใน อีเลเมนต์ HTML ระหว่างเนื้อหาและขอบ (border)

padding มักสับสนกับคุณสมบัติ margin ซึ่งเพิ่มพื้นที่ ภายนอก ขอบของอีเลเมนต์ (ตรงข้ามกับ padding)

พื้นฐาน CSS Padding

นี่คือปุ่มพร้อมป้ายข้อความ (เนื้อหา):

<button>Button</button>

ลองกำหนด padding 24px ให้ปุ่ม:

button { padding: 24px; }

ผลลัพธ์:

หากเปลี่ยนค่า padding เป็น 0 จะได้:

มีคุณสมบัติ padding ทั้งหมด 5 แบบใน CSS:

padding-top
padding-right
padding-bottom
padding-left
padding (shorthand property ที่เราใช้ไป)

สี่คุณสมบัติแรก (-top, -right, -bottom, -left) เป็นคุณสมบัติแยกทิศทางที่เพิ่ม padding ได้เพียงด้านเดียวเท่านั้น

คุณสมบัติสุดท้าย padding เป็น shorthand property (คุณสมบัติย่อ) ที่ยืดหยุ่นและใช้บ่อยที่สุด

มาสำรวจ padding shorthand ให้ลึกขึ้น

วิธีใช้ Padding Shorthand

Shorthand padding สามารถกำหนดค่า padding หลายค่าได้พร้อมกัน (1, 2, 3, หรือ 4 ค่า)

One Value Padding Shorthand (1 ค่า)

ในตัวอย่างปุ่ม padding 24px ก่อนหน้า สามารถเขียนได้ว่า:

button { padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; }

แต่เขียนยาวเกินไป ใช้ one-value shorthand แทน:

button { padding: 24px; }

Two Value Padding Shorthand (2 ค่า)

ถ้าต้องการ padding บน-ล่าง 16px และ ซ้าย-ขวา 24px:

button { padding-top: 16px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px; }

ใช้ two-value shorthand:

button { padding: 16px 24px; }

เมื่อใช้ 2 ค่า:

ค่าแรก = padding บนและล่าง
ค่าที่สอง = padding ซ้ายและขวา

Three Value Padding Shorthand (3 ค่า)

เมื่อใช้ 3 ค่า เช่น:

button { padding: 12px 24px 8px; }

ค่าแรก = padding บน
ค่าที่สอง = padding ซ้ายและขวา
ค่าที่สาม = padding ล่าง

Four Value Padding Shorthand (4 ค่า)

เมื่อใช้ 4 ค่า เช่น:

button { padding: 12px 16px 12px 16px; }

ค่าแรก = padding บน
ค่าที่สอง = padding ขวา
ค่าที่สาม = padding ล่าง
ค่าที่สี่ = padding ซ้าย

เมื่อไหร่ควรใช้ Single-direction Padding Properties?

Shorthand padding" มีความยืดหยุ่นและมีประสิทธิภาพมากกว่า single-direction properties มาก


ทำไมถึงต้องใช้ padding-left: 24px; แทน shorthand?
padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */
เหตุผลหลักคือ เมื่อต้องการเพิ่ม padding เฉพาะด้านเดียว และอยากให้อีก 3 ด้านคงค่า default/current ไว้ (ขึ้นอยู่กับการตั้งค่า)
แต่ถ้าต้องการ padding เฉพาะซ้าย และ 0 ด้านอื่นด้วย single-direction ต้องเขียน:
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 24px
โค้ดเยอะมาก ส่วน shorthand เขียนได้บรรทัดเดียว:
padding: 0 0 0 24px; /* top, right, bottom, left */
Default/current padding values มาจากไหน?

User Agent Stylesheet (UAS)
CSS library หรือ framework
Style declarations อื่นๆ ใน stylesheet (CSS cascades)

User Agent Stylesheet (UAS) คือ stylesheet ขั้นต่ำที่เบราว์เซอร์มี built-in เพื่อให้เนื้อหาอ่านได้แม้ไม่ได้เพิ่ม CSS เอง
ตัวอย่าง: ปุ่มมี padding อยู่แล้วจากที่มาบางที่:
button { padding-top: 16px; padding-right: 20px; padding-bottom: 20px; padding-left: 16px }
สร้าง class เฉพาะ padding-top:
.button-login { padding-top: 40px; }
ปุ่ม login จะมี padding อื่นๆ มาจากที่เดิม (inherited)
Single-direction properties อาจสร้างความสับสนหรือผลลัพธ์ที่คาดเดาไม่ได้ ขึ้นกับระเบียบของ codebase
ผมไม่นิยมใช้ single-direction เพราะทุกโปรเจกต์ใหม่จะ reset padding เป็น 0 แล้วค่อยเพิ่มตาม spacing scale ทำให้ workflow คาดเดาได้ง่ายกว่า
สรุป: ใช้ shorthand padding เป็นหลัก จะได้ผลลัพธ์ที่คาดเดาได้และสะดวกกว่า
วิธีจำ Padding Shorthands
Four-value shorthand จำง่ายที่สุด เพราะเรียง ตามเข็มนาฬิกา: top, right, bottom, left
Two และ three value shorthand จำยากกว่า:

Two value: 16px 8px (top-bottom, left-right)
Three value: 8px 16px 4px (top, left-right, bottom)

หมายเหตุ: three-value shorthand ใช้บ่อยมาก ผมคิดว่าไม่คุ้มค่าที่จะจำ ใช้ความจุสมองทำอย่างอื่นดีกว่า ดูได้ตอนต้องการ
หน่วยความยาวที่รองรับสำหรับ Padding
padding รองรับหน่วยความยาวทุกประเภท พบบ่อย: px, rem, em, %, vw, vh, inherit
หมายเหตุ: ใช้ px ในบทช่วยสอนเพราะเข้าใจง่ายสำหรับมือใหม่ (โดยเฉพาะมาจาก design tools อย่าง Figma, Sketch)
แต่ px เป็น absolute units ความยาวคงที่ ไม่ scale ได้ดี
Relative units เช่น rem, em, %, vw, vh scale ได้ดี แต่วิธีการต่างกัน
ผมใช้ rem ส่วนใหญ่ แต่ก็ขึ้นอยู่กับความชอบ เพราะเบราว์เซอร์สมัยใหม่รองรับทุกหน่วยแล้ว
Performance Optimization (อ่านเพิ่มเติม)
สำหรับคนที่มาจาก performance optimization: "Shorthand vs single-direction มีความแตกต่างด้าน performance ไหม?"
คำตอบคือ มี แต่ทำนายยากว่าแบบไหนเร็วกว่า:
padding: 8px 12px 16px 20px;
padding-top: 8px; padding-right: 12px; padding-bottom: 16px; padding-left: 20px;
อาจคิดว่า shorthand เร็วกว่าเพราะ byte น้อยกว่า แต่ขึ้นอยู่กับ build process (parsing, minifying, compiling) และการ config โปรเจกต์
ความแตกต่างเล็กมาก ไม่คุ้มค่าที่จะกังวล มีปัญหา performance สำคัญกว่านี้เยอะมาก