Margin vs Padding ใช้อย่างไรให้ถูกต้อง
เชื่อว่าการเขียน CSS ในช่วงเริ่มแรกของทุกคนมักจะมีสองสิ่งนี้เข้ามาเกี่ยวข้องในการจัดการ element แต่ละตัวอย่างแน่นอน แต่บางครั้งคนที่ใช้งานแรกๆก็อาจจะสับสนและใช้ผิดไปบ้าง วันนี้เราจะมาแนะนำการใช้งาน margin และ padding กัน
margin เราจะใช้เมื่อต้องการสร้างช่องว่างระหว่างตัว element
padding เราจะใช้เมื่อต้องการสร้างช่องว่าง ระหว่างตัว Content ด้านในกับตัว element
จากรูปภาพข้างต้นทำให้เราเห็นได้ง่ายๆเลยว่า พื้นที่ของ margin และ padding ถูกคั่นกันด้วยเส้นบางๆคือเส้นขอบของตัว element นั่นเอง จำได้ง่ายๆว่า “padding ด้านใน-margin ด้านนอก” ทีนี้เรามาลงรายละเอียดของการใช้งาน margin และ padding เพิ่มเติมกัน
Margin
การใช้งาน property เฉพาะของตัว margin สามารถกำหนดเพิ่มเติมได้ตามด้านของตัว element เลย คือ
- margin-top
- margin-right
- margin-bottom
- margin-left
ซึ่งสามารถกำหนดตัว value ได้ดังนี้
- auto : ถ้ากำหนดแบบนี้ browser จะเป็นคนคำนวณ value ให้
- length : ใช้หน่วย px, pt, cm หรืออื่นๆ ตามหน่วยความยาวที่เราใช้กัน
- % : คำนวณจาก % ความกว้างของ element ที่เป็นตัว contain
- inherit : จะนำค่าจากตัว parent element มาใช้
สามารถใช้ตัวเลขติดลบในการกำหนดค่าได้
Padding
การใช้งาน property เฉพาะของตัว padding สามารถกำหนดเพิ่มเติมได้ตามด้านของตัว element เช่นเดียวกัน คือ
- padding-top
- padding-right
- padding-bottom
- padding-left
และกำหนดค่า value ได้เหมือนกันกับ margin ยกเว้น auto และไม่สามารถใช้ตัวเลขติดลบในการกำหนดค่าได้
อย่างที่ได้บอกไปแล้วว่าทั้ง margin และ padding มีตัว property เพิ่มเติม ดังนั้นก็สามารถเขียนแบบไม่ใส่ property ก็ได้ ซึ่งสามารถเขียนได้หลายรูปแบบดังต่อไปนี้
margin: 15px 25px 20px 30px; //เว้นระยะห่างระหว่าง element ด้านบน 15px, ด้านขวา 25px, ด้านล่าง 20px และด้านซ้าย 20pxmargin: 12px 8px 15px; //เว้นระยะห่างระหว่าง element ด้านบน 12px, ด้านขวา 8px และด้านล่าง 15pxmargin: 12px 18px; // เว้นระยะห่างระหว่าง element ด้านบนและล่าง 12px และ ด้านซ้ายและขวา 18pxmargin: 8px; //เว้นระยะห่างระหว่าง element ทุกด้าน 8px
หวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้อ่าน ผู้ที่กำลังเริ่มต้นใช้งาน ให้หายงงงวยกับการที่จะเลือก margin หรือ padding ไปใช้งานไม่มากก็น้อย แล้วพบกันใหม่ในบทความต่อๆไปนะคะ :)
