วิธีตั้งค่าขอบล่าง (Margin Bottom) ของ Element ด้วย CSS

บทนำ

Property margin-bottom ใช้กำหนดระยะห่างด้านล่างของ element ระหว่าง element นั้นกับ element ถัดไป สามารถระบุเป็นความยาว (px, em, rem) เปอร์เซ็นต์ หรือ auto

ตัวอย่างโค้ด

<html>
<head></head>
<body>
  <p style="margin-bottom: 40px; border:2px solid yellow;">
    Cricket crazy nation India!
  </p>
  <p style="margin-bottom: 20%; border:2px solid yellow;">
    Cricket crazy nation Australia!
  </p>
</body>
</html>

ค่าที่ใช้ได้

Margin Collapsing (การรวม Margin)

เมื่อ element ติดกัน margin-bottom ของ element บน และ margin-top ของ element ล่างจะ "รวมกัน" ใช้ค่าที่ใหญ่กว่า ไม่ได้บวกกัน

<div style="margin-bottom: 30px; background: pink;">Box 1</div>
<div style="margin-top: 20px; background: lightblue;">Box 2</div>
<!-- ระยะห่างจริง = 30px (ไม่ใช่ 50px) -->

การใช้งานกับ Box Model

/* Box model เรียบร้อย */
.box {
  margin: 10px 20px 30px 40px;  /* top right bottom left */
  /* หรือ */
  margin-bottom: 30px;           /* เฉพาะด้านล่าง */
}

JavaScript

// ดึงค่า
var mb = element.style.marginBottom; // "40px"

// ตั้งค่า
element.style.marginBottom = "20px";
element.style.marginBottom = "2em";
element.style.marginBottom = "5%";

ข้อแตกต่าง Margin vs Padding

• Margin - ระยะห่างนอก element (โปร่งใส)
• Padding - ระยะห่างใน element (มีพื้นหลังสี)