Style margin attribute

ການກໍານົດຫຼືການນໍາໃຊ້

margin ປະເພດການກຳນົດຫຼືກັບການກັບຄືນຂອງຂ້າງຂວາງຂອງປະກອບອາດີດ

ປະເພດປະກອບຄູ່ມືກັບຫນຶ່ງເລີກຫນຶ່ງຫາສີ່ຄັນ

  • ຄັນຕົວເລກຫນຶ່ງອີງຕາມ: div {margin: 50px} - ດ້ານຂ້າງຂວາງທັງສີ່ດ້ານ 50px
  • ສອງຄັນຕົວເລກອີງຕາມ: div {margin: 50px 10px} - ດ້ານທາງຂວາງຫົວຫຼັງ 50px ແລະດ້ານທາງຂວາງຫົວຫຼັງ 10px
  • ສາມຄັນຕົວເລກອີງຕາມ: div {margin: 50px 10px 20px} - ດ້ານຂ້າງຂວາງຈາກຂ້າງກາງຂອງ 50px ດ້ານຂ້າງຂວາງຈາກສາຍຫົວ 10px ແລະດ້ານຂ້າງຂວາງຈາກທາງລຸ່ມ 20px
  • ຄູ່ມົນສີ່ຈຳນວນ, ເປັນຕົວຢ່າງ: div {margin: 50px 10px 20px 30px} - margin ຕົວເລກທີ່ສະໝອງຂອງພັນລະບາດເທິງສີ່ສະໝອງ, margin ຕົວເລກທີ່ສະໝອງຂອງພັນລະບາດເທິງສະໝອງຂອງພັນລະບາດ, margin ຕົວເລກທີ່ສະໝອງຂອງພັນລະບາດເທິງສະໝອງທີ່ຫຼັງ, margin ຕົວເລກທີ່ສະໝອງຂອງພັນລະບາດເທິງສະໝອງທີ່ທາງຍາວ.

margin ແລະ padding ທັງສອງພັນລະບາດຈະສະແດງສະໝອງຂອງພັນລະບາດບໍ່ມີຂອງພັນລະບາດ. ແຕ່ການແຕກຕ່າງລະບົບແມ່ນ, margin ຈະສະແດງສະໝອງບໍ່ມີພາຍໃນວົງຮາງຂອງສະໝອງ, ແຕ່ padding ຈະສະແດງສະໝອງບໍ່ມີພາຍໃນວົງຮາງພັນລະບາດ.

ອີງຕາມອີກ:

ການສອນ CSS:ການບັນຈຸປະຕູ CSS

ຊູມສຳນວັດ CSS:margin

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ຈະຕັ້ງ margin <div> ທັງສີ່ສະໝອງ:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

ພະຍາຍາມດັ່ງນັ້ນ

ຕົວຢ່າງ 2

ຈະຕັ້ງ margin <div> ທັງສີ່ສະໝອງໃຫ້ຈະ 25px:

document.getElementById("myDiv").style.margin = "25px";

ພະຍາຍາມດັ່ງນັ້ນ

ຕົວຢ່າງ 3

ຈະກັບຄືນ margin <div> ຂອງ:

alert(document.getElementById("myDiv").style.margin);

ພະຍາຍາມດັ່ງນັ້ນ

ຕົວຢ່າງ 4

ຄວາມແຕກຕ່າງລະບົບ margin ແລະ padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

ພະຍາຍາມດັ່ງນັ້ນ

ການສະແດງວິທະຍານ

ຈະກັບຄືນ margin:

object.style.margin

ຈະຕັ້ງຂໍ້ມູນ margin:

object.style.margin = "ການອະທິບາຍ|ຈະອາດສະແດງສະໝອງຂອງພັນລະບາດດ້ວຍຕົວເລກຂອງພັນລະບາດດັ່ງກ່າວຫາ.|auto|initial|inherit"

ຄູ່ມົນສະແດງຂອງພັນລະບາດ

ຄູ່ມົນປະຈຳສະແດງ ຄູ່ມົນປະຈຳຕົ້ນຕົວ
ການອະທິບາຍ %
ຈະອາດສະແດງສະໝອງຂອງພັນລະບາດດ້ວຍຕົວເລກຂອງພັນລະບາດດັ່ງກ່າວຫາ. length
ຈະອາດສະແດງສະໝອງຂອງພັນລະບາດດ້ວຍຕົວເລກດັ່ງກ່າວຫາ (ທັງສີ່ສະໝອງຈະມີຄວາມຍິນດຽວ). auto
initial ຈະຕັ້ງຂໍ້ມູນດັ່ງກ່າວຫາຄູ່ມົນປະຈຳຕົ້ນຕົວຂອງພັນລະບາດດັ່ງກ່າວຫາ。ບັນຍາວ່າ initial。
inherit ຈະອາດຮັບຜົນຈາກປະຈຳພັນລະບາດຂອງພັນລະບາດຕໍ່ໄປ。ບັນຍາວ່າ inherit。

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄູ່ມົນປະຈຳຕົ້ນຕົວ： 0
ຜົນການກັບຄືນ： ຄຳຂັດແຍກສະແດງສະໝອງຂອງພັນລະບາດ。
CSS 版本： CSS1

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持