Tutorial

[Dev Tip] Padding VS Margin

By Arnon Puitrakul - 10 กรกฎาคม 2015

[Dev Tip] Padding VS Margin

ตอนนี้ก็หายไปหลายวันอยู่ ช่วงนี้กำลังเดินทัวร์ถ่ายรูปเล่นอยู่ เลยไม่ค่อยมีเวลามานั่งเขียน Blog เลย เสียจุย.. เข้าเรื่องกันดีกว่า วันนี้เราจะมาพูดถึงเรื่องที่มือใหม่หลาย ๆ คน งง กันนั่นคือ Padding กับ Margin
Padding กับ Margin ใช้ทำอะไร ?
ทั้ง 2 อย่างนี้มันเอาไว้จัดขนาดของวัตถุเราได้เหมือนกัน แต่ก่อนจะไปถึงเรื่องความแตกต่าง เราต้องมาเข้าใจถึงเรื่องของการสร้างกล่องหรือ Box Model กันก่อนเลย

paddingvsmargin1

จะเห็นได้ว่า ในความเป็นจริงเบื้องหลังของ Object สักอันนึงที่วางอยู่ในหน้าเว็บหรือ App ของเรานั้น ไม่ได้มีแค่ตัวมันที่เรามองเห็นได้เท่านั้น นอกจากตัว Object แล้วมันยังมีทั้ง Padding และ Margin เข้ามาเกี่ยวข้องอีกด้วย

Padding คืออะไร?

ให้เรามองว่า Object (Text หรือแม้กะทั่ง Image) ทุก ๆ อย่างมีกรอบครอบมันอยู่อีกชั้นนึง เหมือนกำแพงบ้านของเรา แต่โดยปกติแล้ว ขนาดของกรอบจะเท่ากับขนาดของ Object ของเราแป๊ะเลย ทำให้เราไม่เห็นกรอบของมัน แต่ถ้าเราเพิ่ม Padding เข้าไป มันก็คือการขยายกรอบที่เอาไว้ครอบตัว Object ของเรานั่นเอง

Margin คืออะไร ?

ถ้าเมื่อกี้ Padding คือการขยาย ขนาดของกำแพงบ้านเรา Margin ก็คือการขยาย รั้วบ้านเรา นึกภาพง่าย ๆ ว่า เรามีบ้านอยู่หลังนึง ถ้าเราไม่มีรั้ว บ้านข้าง ๆ ก็จะมาสร้างติดบ้านเราได้เลย แต่ถ้าเรามีรั้ว บ้านข้าง ๆ ก็จะไม่สามารถสร้างทับรั้วเราได้ ทำให้บ้านเรามันไม่ดูอึดอัด ในหน้าจอก็เหมือนกัน ถ้าเราเติม Margin เข้าไปจะเป็นการบอกว่า Object นี้จะต้องอยู่ห่าง Object ข้าง ๆ เท่าไหร่ก็ว่ากันไปตามที่เราใส่เท่านั้นเอง

สรุป

สรุปแล้ว หลักการง่าย ๆ ในการเลือกคำสั่งระหว่าง Padding และ Margin คือ ถ้าเราต้องการเพิ่มขนาดของกล่องให้เราเลือกใช้ Padding แต่กลับกัน ถ้าเราอยากจะเว้นระยะห่างระหว่าง Object ข้าง ๆ แล้วล่ะก็ ให้เราเลือกใช้ Margin นั่นเอง

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...