การใช้งานคุณสมบัติ margin-top ใน CSS

คุณสมบัติ margin-top

คุณสมบัติ margin-top ระบุ margin ด้านบนขององค์ประกอบ รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือ auto

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อกำหนด margin บน:

<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>

รายละเอียด:

• ความยาว: px, em, rem, cm, ฯลฯ
• เปอร์เซ็นต์: % ของความกว้างของ containing block
• auto - เบราว์เซอร์คำนวณเอง
• รับค่าลบได้ (overlap content)
• ส่วนหนึ่งของ margin shorthand