ປະສົມປະສານ padding

ການຄົ້ນຄວ້າ ແລະ ການນໍາໃຊ້

padding ປະສົງຜົນດັ່ງກ່າວສາມາດມີຈຳນວນສີ່ຄັນຫຼັງຈາກຄັນທຳອິດ ຫາຄັນສຸດທ້າຍ:

ປະສົງຜົນດັ່ງກ່າວສາມາດມີຈຳນວນສີ່ຄັນຫຼັງຈາກຄັນທຳອິດ ຫາຄັນສຸດທ້າຍ:

ຜົນຂອງ margin ແລະ padding ປະກອບ ທັງໝົດທີ່ສະຫຼາກບາງຫົວໜ້າ. ແຕ່ວ່າ, margin ຈະສະຫຼາກບາງບໍລິເວນກາງບາງບັນຍາກອງ, ແຕ່ padding ຈະສະຫຼາກບາງບັນຍາກອງພາຍໃນບັນຍາກອງ.

  • ຄັນຫຼັງຈາກ: div {padding: 50px} - ອັນດັບຂອງສີ່ຂ້າງຈະເປັນ 50px
  • ສອງຄັນຫຼັງຈາກ: div {padding: 50px 10px} - ອັນດັບກາງຂອງບາງຫົວໜ້າຈະເປັນ 50px, ອັນດັບຂວາຂອງບາງຫົວໜ້າຈະເປັນ 10px
  • ສາມຄວາມຈິງ, ເປັນຕົວຢ່າງ: div {padding: 50px 10px 20px} - padding ທາງເທິງປະກອບ 50px, padding ທາງດ້ານຍິງ ແລະ ທາງດ້ານຂວາ 10px, padding ທາງດ້ານລົງ 20px
  • ສີ່ຄວາມຈິງ, ເປັນຕົວຢ່າງ: div {padding: 50px 10px 20px 30px} - padding ຂອງບໍລິເວນທາງເທິງປະກອບ 50px, padding ທາງທີ່ຍິງ 10px, padding ທາງດ້ານລົງ 20px, padding ທາງດ້ານຂວາ 30px

ອີງຕາມ:

ການສອນ CSS:ປະສົມປະສານ padding CSS

ປາກວິທິການ CSS:padding ປະກອບ

ຄວາມນຳພາສາ

ຄັ້ງທີ 1

ການຈັດຕັ້ງ padding ປະກອບ <div>:

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

ຕິດຕາມຄວາມຈິງ

ຄັ້ງທີ 2

ການປ່ຽນຄວາມຫ່າງກັນຂອງປະກອບ <div> ທັງສີ່ບ່ອນເປັນ "25px":

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

ຕິດຕາມຄວາມຈິງ

ຄັ້ງທີ 3

ຜົນກັບ:

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

ຕິດຕາມຄວາມຈິງ

ຄັ້ງທີ 4

ຄວາມແຕກຕ່າງຂອງປະກອບ margin ແລະ padding:

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

ຕິດຕາມຄວາມຈິງ

ວິທິການ

ການຫຼົງ padding ປະກອບ:

object.style.padding

ການຈັດຕັ້ງ padding ປະກອບ:

object.style.padding = "%|length|initial|inherit"

ຄູ່ມູນມອງຂອງປະກອບ

ຄວາມຈິງ ສະແດງຄວາມຈິງ
% ການຈັດຕັ້ງຄວາມຫ່າງກັນພາຍໃນທີ່ສ່ວນຫຼາຍເປັນສິບຕາມຄວາມຫຼາຍຂອງປະຈຳປະກອບປົກກະຕິ.
length ການຈັດຕັ້ງຄວາມຫ່າງກັນພາຍໃນທີ່ມີຈຳນວນຫຼາຍ.
initial ການຈັດຕັ້ງອານຸສາວະລີນີ້ເປັນຄູ່ມູນມອງ. ບັນຍາວ່າ initial.
inherit ສະແດງອານຸສາວະລີນີ້ຈາກປະຈຳປະກອບປົກກະຕິ. ບັນຍາວ່າ inherit.

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

ຄູ່ມູນມອງ: 0
ຜົນກັບ: ວັດສະນະທີ່ອະທິບາຍຄວາມຫ່າງກັນພາຍໃນປະກອບອີກມາຂອງບັນດາຫຼັກ.
CSS ສະບັບການ: CSS1

ບັນຊີວັດຢູ່

Chrome ເອດຈູດ ຟຣິກເສັກ ຊາຟີ ອອບປາລາ
Chrome ເອດຈູດ ຟຣິກເສັກ ຊາຟີ ອອບປາລາ
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ