ตั้งค่าขอบบน (Margin Top) ของ Element ด้วย CSS

บทนำ

Property margin-top ระบุระยะห่างด้านบนของ element ใช้ค่าได้เหมือน margin-bottom: length, percentage, auto

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

<html>
<head></head>
<body>
  <p style="margin-top: 10px; border:2px solid red;">
    This is a paragraph with a specified top margin.
  </p>
  <p style="margin-top: 10%; border:2px solid green;">
    This is another paragraph with a specified top margin in percent.
  </p>
</body>
</html>

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

การใช้งานร่วมกับ margin-bottom

/* ระยะห่างบน-ล่างต่างกัน */
p {
  margin-top: 1em;
  margin-bottom: 1.5em;
}

/* ใช้ shorthand */
p {
  margin: 1em 0 1.5em;  /* top: 1em, right/left: 0, bottom: 1.5em */
}

Margin Collapsing กับ margin-top

margin-top ของ child element อาจ "หลุด" ออกไปเป็น margin ของ parent ถ้า parent ไม่มี border/padding/overflow

<div class="parent">
  <div class="child" style="margin-top: 30px;">Child</div>
</div>

/* Parent ไม่มี border/padding -> margin-top 30px ย้ายไปอยู่ parent */

แก้ไข Margin Collapsing

/* วิธี 1: เพิ่ม padding-top แค่ 1px */
.parent { padding-top: 1px; }

/* วิธี 2: เพิ่ม border-top */
.parent { border-top: 1px solid transparent; }

/* วิธี 3: ใช้ overflow */
.parent { overflow: hidden; }

/* วิธี 4: ใช้ flex/grid */
.parent { display: flex; }

JavaScript

// ดึงค่า (computed style)
var mt = window.getComputedStyle(element).marginTop; // "10px"

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

Use Cases

• เว้นระยะห่างหัวข้อกับเนื้อหา
• ดัน element ลงจากด้านบน
• สร้าง visual hierarchy
• Centering แนวตั้ง (กับ margin-bottom auto และ height คงที่)