กำหนด CSS margin ทั้งหมดในการประกาศเดียว (margin shorthand)

คุณสมบัติ margin (Shorthand)

คุณสมบัติ margin กำหนดพื้นที่รอบองค์ประกอบ HTML สามารถใช้ค่าลบได้เพื่อทับซ้อนเนื้อหา ระบุ shorthand property สำหรับตั้งค่า margin ทั้งหมดในการประกาศเดียว

ตัวอย่าง

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

<html>
  <head>
  </head>
  <body>
    <p style="margin: 20px; border:2px solid yellow;">
      All four margins will be 20px </p>
    <p style="margin: 15px 4% -10px; border:2px solid red;">
      Top margin will be 15px, left and right margin will be 4% of the total width of the document, bottom margin will be -10px </p>
  </body>
</html>

รูปแบบ margin shorthand:

• 1 ค่า: margin: 20px; (ทุกด้าน)
• 2 ค่า: margin: 10px 20px; (top/bottom, left/right)
• 3 ค่า: margin: 10px 20px 30px; (top, left/right, bottom)
• 4 ค่า: margin: 10px 20px 30px 40px; (top, right, bottom, left - ใบอนาจาร)

ค่าลบได้ ใช้สำหรับ overlapping layouts