ความแตกต่างของ Margin และ Padding ใน CSS
ปัจจุบันมีเครื่องมือต่าง ๆ เข้ามามากมายช่วยเหล่านักพัฒนาซอฟแวร์ ในการจัดการกับ Layout โดยเครื่องมือที่ดัง และยังเป็นที่นิยมสูงสุดคงหนีไม่พ้น Bootstrap โดยปัจจุบันก็มาถึงเวอชั่นที่ 4 เข้าไปแล้ว… ตัว Bootstrap เองก็มีการจัดการ Layout ในส่วนของ Margin และ Padding มาให้แบบสวย ๆ แต่ทว่าถ้าหากเราต้องการจะ Override เอง หรือคิดจะทำเองแบบไม่ใช้ตัวช่วย บางท่านอาจจะยังไม่เข้าใจความแตกต่างของ Margin กับ Padding อันที่จริงทั้งสองตัวนี้มันมีมาตั้งแต่ CSS 1 แล้ว วันนี้ผมจะพาทุกท่านไปทบทวนกัน…
บทความนี้จะพูดถึงความแตกต่างของ Margin กับ Padding ใน CSS เท่านั้น
TL;DR
- Margin ใช้แบ่งแยกช่องว่างระหว่าง element จาก “ข้างนอก”
- Padding ใช้แบ่งแยกช่องว่างระหว่าง element จาก “ข้างใน”
Margin
Margin จะใช้แบ่งแยกช่องว่างระหว่าง element ของเราจาก “ข้างนอก”
Margin Property Sets
Margin มี Property sets อยู่ 4 ตัวนั่นคือ
margin-top
margin-right
margin-bottom
margin-left
เราสามารถใช้ margin เฉย ๆ โดยไม่จำเป็นต้องใส่ -left, -right, -bottom, -left ได้
หากเราเขียน margin:10px 10px 10px 10px; หรือ margin:10px;จะหมายถึง margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
หากเราเขียน margin:10px 20px 10px;
จะหมายถึง margin-top:10px; margin-right:20px; margin-left:20px margin-bottom:10px;
หากเราเขียน margin:10px 20px
จะหมายถึง margin-top:10px; margin-bottom:10px; margin-left:20px; margin-right:20px;
Property Values
- length: เช่น
px, pt, cm, ect.หรือใส่เป็น เปอเซ็นก็ได้ (%) โดยที่มี default เป็น 0 - auto: ตัว Browser จะคำนวณให้เอง
- initial: หากเซทค่า margin: initial; จะเป็นการเซท default margin
- inherit: หากเซทค่า margin: inherit จะเป็นการไปดึงค่า margin ที่เป็น parent element มาใช้ (สะดวกเวลาเราขี้เกียจเขียนให้มันยาว)
Browser Support
Padding
Padding จะใช้แบ่งแยกช่องว่างระหว่าง element ของเราจาก “ข้างใน”
Padding Property Sets
Padding มี Property sets อยู่ 4 ตัวนั่นคือ
padding-top
padding-right
padding-bottom
padding-left
เราสามารถใช้ padding เฉย ๆ โดยไม่จำเป็นต้องใส่ -top, -right, -bottom, -left ได้
หากเราเขียน padding:10px 10px 10px 10px; หรือ padding:10px;จะหมายถึง padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;
หากเราเขียน padding:10px 20px 10px;
จะหมายถึง padding-top:10px; padding-right:20px; padding-left:20px; padding-bottom:10px;
หากเราเขียน padding:20px 10px
จะหมายถึง padding-top:20px; padding-bottom:20px; padding-left:10px; padding-right:10px;
Property Values
- length: เช่น
px, pt, cm, ect.หรือใส่เป็น เปอเซ็นก็ได้ (%) โดยที่มี default เป็น 0 - initial: หากเซทค่า margin: initial; จะเป็นการเซท default margin
- inherit: หากเซทค่า padding: inherit จะเป็นการไปดึงค่า padding ที่เป็น parent element มาใช้ (สะดวกเวลาเราขี้เกียจเขียนให้มันยาว)
Browser Support
Example
เราจะทำการสร้าง element ขึ้นมาดังนี้
<body style="background-color: #ffff00; margin:0;">
<div style="border-style: solid; border-width:thin; border-color:#000; background-color: #FDDEA2; color: #000000; width:200px;">
TEST
</div>
</body>
จากภาพจะเห็นว่า ทุกอย่างจะเป็นค่า Default ตัวหนังสือข้างในจะชิดขอบทางซ้าย ทีนี้เราจะลองแก้ element ของเราโดยการเพิ่ม padding เข้าไป
<body style="background-color: #ffff00; margin:0;">
<div style="... width:200px; padding:20px 20px 20px 20px;">
TEST
</div>
</body>
จากภาพจะเห็นว่า ตัวหนังสือของเราออกห่างจากขอบทางด้านบนลงมา 20px และด้านซ้ายขยับเข้ามา 20px และ ขยับด้านล่างอีก 20px ทีนี้เรามาลองใช้ margin กัน
<body style="background-color: #ffff00; margin:0;">
<div style="... width:200px; padding:20px 20px 20px 20px; margin-top:20px; margin-left:20px;">
TEST
</div>
</body>
จะเห็นว่ากล่องได้ถูกขยับเลื่อนลงมาจาก body 20px และขยับออกมาจากทางซ้าย 20px
Conclusion
จำง่าย ๆ “Margin ห่างข้างนอก” ส่วน “Padding ห่างข้างใน”
ทั้งสองตัวแบ่ง Property sets เหมือนกัน “top, right, bottom, left”
โดยมีค่า default เป็น 0
