เมื่อคุณสร้างแบบเว็บไซต์ และเริ่มออกแบบเว็บไซต์ของคุณ ต้องมีการจัดรูปแบบในสัดส่วนต่างๆ ที่จะแสดงผลบนเว็บไซต์ของคุณ ซึ่งในส่วนต่างๆ ต้องมีการจัดระยะห่าง ของแต่ละส่วน เพื่อความสวยงามและเป็นระเบียบ ซึ่ง CSS มีคำสั่งที่สามารถใช้ได้ Padding และ Margin ซึ่งทั้ง 2 คำสั่งนี้ มีวิธ๊ใช้ และมีความแตกต่างกัน และรวมไปถึงข้อควรระวังในการใช้คำสั่ง padding และ margin ที่อาจส่งผลต่อการแสดงผลของวัตถุบนหน้าจอเว็บไซต์ที่จะแสดงออกมา

 

Padding

คือระยะห่าง ระหว่าง View กับ Content กสารกำหนดระยะห่าง ระหว่างขอบวัตถุจาก ด้านใน กำหนดขอบให้กับ HTML element ทั้ง 4 ด้าน เป็นระยะห่างออกจาก box model  กับเนื้อหาที่อยู่ด้านใน เช่น เส้นขอบ box เว้นระยะห่างออกจาก ตัวอักษรด้านใน

ตัวอย่างการใช้งาน

.box{
  width : 200px;
  height : 100px;
  padding : 10px;
}

 

padding มีรูปแบบดังนี้

• padding-top คือ เว้นระยะขอบบน(ด้านใน)
• padding-bottom คือ เว้นระยะขอบล่าง(ด้านใน)
• padding-right คือ เว้นระยะขอบขวา(ด้านใน)
• padding-left คือ เว้นระยะขอบซ้าย(ด้านใน)

รูปภาพตัวอย่างเพื่อความชัดเจน

 

Margin

คือระยะห่างระหว่าง View กับ Parent เป็นการเว้นระยะห่างออกจาก ด้านนอก เช่น ต้องการให้กล่อง หรือวัตถุ เว้นระยะห่างจากด้านต่างๆ 

Margin มีรูปแบบดังนี้

• margin-top คือ เว้นระยะขอบบน(ด้านนอก)
• margin-bottom คือ เว้นระยะขอบล่าง(ด้านนอก)
• margin-right คือ เว้นระยะขอบขวา(ด้านนอก)
• margin-left คือ เว้นระยะขอบซ้าย(ด้านนอก)

.box{
  width : 200px;
  height : 100px;
  margin : 10px;
}

รูปภาพตัวอย่างการทำงานของ Margin

 

ซึ่งหน่วยของการในการกำหนด margin และ padding ก็เป็นส่วนสำคัญในการเลือกใช้ในงานของคุณเช่นกัน padding เป็นการเว้นระยะห่าง ของวัตถุ และ content ที่อยู่ด้านใน เช่น box วัตถุ ที่มีตัวหนังสือด้านใน ห่างกำหนด padding ให้กับ box เส้นขอบ box กับจัวหนังสือ จะห่างออกจากกัน ตามด้านที่กำหนด แต่หากไม่ได้กำหนดด้าน ใช้เพียง padding ระยะห่างก็จะเว้นทุกด้านของ box การใช้ padding สามารถนำไปใช้ได้หลายรูปแบบ

Margin เป็นการกำหนดระยะห่างจากด้านนอก ระยะห่างจากวัตถุ และหน้าจอ view เช่น box ที่อยู่บนหน้าจอพื้นที่ view ถูกกำหนด margin ก็จะเป็นการขยับตำแหน่งจามที่กำหนด ถ้าหากไม่ได้กำหนดด้าน กำหนดเพียง margin ก็จะเป็นการกำหนดระยะห่างทุกด้าน

ซึ่งการกำหนด padding และ margin จะส่งผลต่อหน้าจอแสดงผล หรือ view ถ้ากำหนดไว้แบบ Dynamic คือการไม่ได้กำหนดค่าโดยตรง การใช้ padding และ margin ที่ถูกกำหนดไม่สมสัดส่วนหรือมากเกินไป จะทำให้การแสดงผลเพี้ยน การแสดงผลอาจจะขาดหายไป การเลือกใช้หน่วยมีผล ในการทำหน้าจอเว็บไซต์แบบรองรับทุกหน้าจอ หรือ Responsive สามารถไปศึกษาหน่วยของ css เพิ่มเติมได้ และสามารถใช้ควบคู่ไปกับ Bootstrap เวอร์ชันต่าง ๆ ได้ โดยการใช้ !important จะเป็นการเลือกใช้การตั้งค่าของคุรก่อน แต่ต้องระวังในการใช้แบบผิดสัดส่วน และไม่ควรใช้ควบคู่กับมากเกินไป จะทำให้การแสดงผลเพี้ยน ทั้งด้านนอก และ content ด้านใน ข้อความ รูปภาพ สี และอื่น ๆ จะทำให้การแสดงผลไม่ครบ และหากใช้ผิดหลายที่ ก็จะต้องเข้าไปแก้ไขในหลายส่วนเกินไป 

 

อ้างอิง

scaler ,[ออนไลน์],เข้าถึงได้จาก https://www.scaler.com/topics/margin-and-padding-in-css/

codecademy ,[ออนไลน์],เข้าถึงได้จาก https://www.codecademy.com/resources/docs/css/margins

edu.gcfglobal,[ออนไลน์],เข้าถึงได้จาก https://edu.gcfglobal.org/en/basic-css/margins-in-css/1/

blog.logrocket. ,[ออนไลน์],เข้าถึงได้ https://blog.logrocket.com/css-margin-vs-padding/

tutorialbrain ,[ออนไลน์],เข้าถึงได้จาก https://www.tutorialbrain.com/css_tutorial/css_padding/