คุณสมบัติ margin

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

คุณสมบัตินี้เป็นคุณสมบัติแบบย่อสำหรับ margin-top, margin-right, margin-bottom, margin-left

ไวยากรณ์

cssselector {
  margin: value;
}

จำนวนค่า

คุณสมบัติ margin รับค่าได้ 1, 2, 3 หรือ 4 ค่า โดยคั่นด้วยช่องว่าง:

ตัวอย่าง

ตอนนี้เราจะมีบล็อกที่ไม่มีช่องว่าง:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

ตัวอย่าง

ตอนนี้เรากำหนดช่องว่างให้บล็อกที่ 10px:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

ตัวอย่าง

กำหนดช่องว่างให้บล็อกที่ 10px ด้านบน และด้านล่าง และ 20px - ด้านซ้ายและด้านขวา:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

ตัวอย่าง

กำหนดช่องว่างให้บล็อกที่ 5px ด้านบน, 15px ด้านขวา, 25px ด้านล่าง และ 35px ด้านซ้าย:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

ดูเพิ่มเติม