CSS Margin: คู่มือการใช้งาน Margin ใน CSS อย่างครบถ้วน

การเพิ่มพื้นที่ว่างระหว่างองค์ประกอบบนหน้าเว็บเป็นสิสำคัญสำหรับการออกแบบประสบการณ์ผู้ใช้ที่สวยงามและทำงานได้อย่างมีประสิทธิภาพ Margin ใช้สร้างพื้นที่ว่างรอบๆ องค์ประกอบ HTML เพื่อแยกองค์ประกอบนั้นจากวัตถุอื่นๆ บนหน้าเว็บ

CSS Margin คืออะไร?

คุณสมบัติ margin ใน CSS ใช้สร้างพื้นที่รอบๆ องค์ประกอบ พื้นที่นี้ช่วยให้คุณแยกองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างง่ายดาย โดยอยู่นอกขอบเขตของขอบ (border)

ใน CSS คุณสมบัติ margin เป็น shorthand (คุณสมบัติแบบย่อ) ของคุณสมบัติย่อย 4 ตัว ซึ่งใช้กำหนด margin ด้านบน ขวา ล่าง และซ้ายขององค์ประกอบบนเว็บ

ทุกองค์ประกอบบนหน้าเว็บประกอบด้วยกล่อง (box) หนึ่งหรือหลายกล่อง องค์ประกอบใช้ box model เพื่อกำหนดว่ากล่องจะแสดงบนหน้าเว็บอย่างไร

Margin เป็นหนึ่งในองค์ประกอบหลักของ box model และอยู่ที่ชั้นนอกสุด ในภาพด้านล่างคุณจะเห็นว่า margin ถูกนำไปใช้ภายนอกขอบขององค์ประกอบ HTML:

ในบทเรียนนี้เราจะเน้นที่คุณสมบัติ margin หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบอื่นๆ ของ box model สามารถอ่านบทความเกี่ยวกับ CSS Borders และ Padding ได้

การกำหนด Margin แต่ละด้านแยกกัน

คุณสมบัติต่อไปนี้ใช้สำหรับกำหนด margin ของแต่ละด้านขององค์ประกอบ:

• margin-top
• margin-right
• margin-bottom
• margin-left

คุณสมบัติเหล่านี้ช่วยให้คุณกำหนด margin สำหรับด้านใดด้านหนึ่งขององค์ประกอบได้ คุณสมบัติแต่ละตัวรับค่าได้ 4 ประเภท ดังนี้:

• length — ระบุ margin ด้วยหน่วย px, em, rem หรือหน่วยความยาว CSS อื่นๆ
• percentage (%) — ระบุ margin เป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบที่ margin ถูกนำไปใช้
• auto — ให้เบราว์เซอร์คำนวณ margin เอง (มักใช้สำหรับจัดกึ่งกลางแนวนอน)
• inherit — ระบุว่า margin ควรสืบทอดมาจากองค์ประกอบพาเรนต์ (parent element)

ตัวอย่าง: การใช้งานคุณสมบัติย่อยของ Margin

สมมติเรากำลังออกแบบกล่อง และต้องการ margin รอบๆ กล่องเพื่อแยกจากองค์ประกอบอื่นๆ กล่องควรมี margin ด้านบน 50px ด้านซ้าย 30px ด้านขวา 40px และด้านล่าง 50px เราสร้างได้ด้วยโค้ดดังนี้:

/* HTML */
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

/* CSS */
.box {
  margin-top: 50px;
  margin-left: 30px;
  margin-right: 40px;
  margin-bottom: 40px;
  border: 1px solid red;
}

.outer {
  border: 1px solid blue;
}

ผลลัพธ์:

ในโค้ดเราสร้างกล่อง 2 กล่อง กล่องแรกใช้แท็ก <div> กำหนดคลาส outer มีขอบสีน้ำเงินกว้าง 1px เพื่อแสดง margin ของกล่องภายใน กล่องที่สองใช้แท็ก <p> มีข้อความ "This is a box" และคลาส box ใช้ style ที่กำหนด margin ต่างกันแต่ละด้าน พร้อมขอบสีแดง 1px

CSS Margin Shorthand: เขียนโค้ดสั้นขึ้น

จากตัวอย่างข้างต้นเราใช้ 4 บรรทัดสำหรับกำหนด margin เราสามารถลดโค้ดลงเหลือบรรทัดเดียวด้วยคุณสมบัติ margin shorthand

รูปแบบ syntax ของ margin shorthand ขึ้นอยู่กับจำนวนค่าที่ระบุ: น้อยที่สุด 1 ค่า มากที่สุด 4 ค่า ให้เราดูรายละเอียดแต่ละกรณี:

1. ใช้ 4 ค่า (ต่างกันทุกด้าน)

ลำดับค่าจะเป็น: บน → ขวา → ล่าง → ซ้าย (ตามเข็มนาฬิกา)

.box {
  margin: 25px 25px 50px 60px;
  border: 1px solid red;
}

หมายถึง: margin-top 25px, margin-right 25px, margin-bottom 50px, margin-left 60px

2. ใช้ 3 ค่า (บน-ล่างต่างกัน ซ้าย-ขวาเท่ากัน)

ลำดับค่า: บน → ซ้าย/ขวา → ล่าง

.box {
  margin: 50px 25px 60px;
  border: 1px solid red;
}

หมายถึง: margin-top 50px, margin-right/left 25px, margin-bottom 60px

3. ใช้ 2 ค่า (บน-ล่างเท่ากัน ซ้าย-ขวาเท่ากัน)

ลำดับค่า: บน/ล่าง → ซ้าย/ขวา

.box {
  margin: 50px 30px;
  border: 1px solid red;
}

หมายถึง: margin-top/bottom 50px, margin-right/left 30px

4. ใช้ 1 ค่า (ทุกด้านเท่ากัน)

.box {
  margin: 50px;
  border: 1px solid red;
}

หมายถึง: margin ทุกด้าน 50px

ค่า inherit: สืบทอด Margin จาก Parent

ค่า inherit ใช้สำหรับสืบทอด margin จากองค์ประกอบพาเรนต์ หากคุณเปลี่ยน margin ของ parent margin ของ child จะปรับตัวอัตโนมัติ

.box {
  margin-left: inherit;
  border: 1px solid red;
}

.outer {
  margin-left: 50px;
  border: 1px solid blue;
}

กล่องภายนอก (ขอบสีน้ำเงิน) มี margin-left 50px กล่องภายใน (ขอบสีแดง) มี margin-left 50px เช่นกัน ซึ่งสืบทอดมาจาก parent

ค่า auto: จัดกึ่งกลางแนวนอน

ค่า auto ใช้จัดกึ่งกลางองค์ประกอบในแนวนอนภายใน container เบราว์เซอร์จะคำนวณ margin ซ้าย-ขวาให้เท่ากันอัตโนมัติ

สูตรการคำนวณ: (Outer Width - Inner Width) / 2

ตัวอย่าง: กล่องภายนอกกว้าง 500px กล่องภายในกว้าง 250px → margin ซ้าย-ขวา = (500-250)/2 = 125px

/* HTML */
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

/* CSS */
.box {
  width: 250px;
  margin: auto;
  border: 1px solid red;
}

.outer {
  width: 500px;
  border: 1px solid blue;
}

กล่องภายในไม่มี margin บน-ล่าง เนื่องจากเราไม่ได้ระบุ

สรุป

คุณสมบัติ margin ใน CSS ใช้สร้างพื้นที่ระหว่างขอบขององค์ประกอบกับองค์ประกอบอื่นๆ บนหน้าเว็บ บทเรียนนี้อธิบายการใช้งาน margin property และคุณสมบัติย่อย 4 ตัว พร้อมตัวอย่าง ตอนนี้คุณพร้อมที่จะใช้ CSS margin อย่างมืออาชีพแล้ว!