CSS padding ແມ່ນຫນຶ່ງໃນຄຸນສົມບັດຂອງ ຮູບແບບກ່ອງ CSS . ຄຸນສົມບັດ shorthand ນີ້ກໍານົດ padding ປະມານສີ່ດ້ານຂອງອົງປະກອບ HTML. CSS padding ສາມາດນໍາໃຊ້ໄດ້ເກືອບທຸກ ແທັບ HTML (ຍົກເວັ້ນບາງແທັບຕາຕະລາງ). ນອກຈາກນັ້ນ, ທັງສີ່ດ້ານຂອງອົງປະກອບສາມາດມີມູນຄ່າທີ່ແຕກຕ່າງກັນ.
CSS Padding Property
ການນໍາໃຊ້ຄຸນລັກສະນະ CSS padding, ທ່ານສາມາດໃຊ້ mnemonic "TROUBLe" (ຫຼື "TRiBbLe" ສໍາລັບທ່ານ Star Trek fans). ນີ້ຢືນສໍາລັບ ທາງເທິງ , ຂວາ , ດ້ານລຸ່ມ , ແລະ ຊ້າຍ , ແລະມັນຫມາຍເຖິງຄໍາສັ່ງຂອງຄວາມກວ້າງ padding ທີ່ທ່ານກໍານົດໃນຊັບສິນ shorthand. ຍົກຕົວຢ່າງ:
padding: ດ້ານເທິງຂວາດ້ານຊ້າຍ; padding: 1px 2px 3px 6pxຖ້າທ່ານໃຊ້ຄຸນຄ່າທີ່ໄດ້ລະບຸໄວ້ຂ້າງເທິງ, ມັນຈະນໍາໃຊ້ມູນຄ່າ padding ທີ່ແຕກຕ່າງກັນໄປທຸກດ້ານຂອງສິ່ງທີ່ HTML ທີ່ທ່ານກໍາລັງນໍາໃຊ້ກັບມັນ. ຖ້າທ່ານຕ້ອງການໃຊ້ແປ້ນພິມດຽວກັນກັບທຸກສີ່ດ້ານ, ທ່ານສາມາດເຮັດງ່າຍ CSS ແລະພຽງແຕ່ຂຽນຄ່າຫນຶ່ງເທົ່ານັ້ນ:
padding: 12pxກັບເສັ້ນຂອງ CSS, 12 pixel ຂອງ padding ຈະນໍາໃຊ້ກັບທັງຫມົດ 4 ດ້ານຂອງອົງປະກອບ.
ຖ້າທ່ານຕ້ອງການ padding ດຽວກັນສໍາລັບທາງເທິງແລະລຸ່ມແລະຊ້າຍແລະຂວາທ່ານສາມາດຂຽນສອງຄ່າ:
padding: 24px 48pxມູນຄ່າທໍາອິດ (24px) ຈະນໍາໃຊ້ກັບທາງເທິງແລະດ້ານລຸ່ມ, ໃນຂະນະທີ່ທີສອງຈະນໍາໃຊ້ກັບຊ້າຍແລະຂວາ.
ຖ້າທ່ານຂຽນສາມຄ່າ, ມັນຈະເຮັດໃຫ້ການວາງພື້ນຫຼັງ (ທາງຊ້າຍແລະຂວາ) ຄືກັນ, ໃນຂະນະທີ່ປ່ຽນແປງດ້ານເທິງແລະດ້ານລຸ່ມ:
padding: ລຸ່ມດ້ານຂວາແລະຊ້າຍ; padding: 0px 1px 3pxອີງຕາມຮູບແບບກ່ອງ CSS, ການໃສ່ແຜ່ນແມ່ນຢູ່ໃກ້ກັບອົງປະກອບ / ເນື້ອໃນຂອງມັນເອງ. ນີ້ຫມາຍຄວາມວ່າ padding ຈະຖືກເພີ່ມເຂົ້າໃນອົງປະກອບທີ່ຢູ່ໃນລະຫວ່າງ width ຫຼື height ຂອງເນື້ອຫາແລະຄ່າ border ໃດໆທີ່ທ່ານໃຊ້. ຖ້າ padding ຖືກຕັ້ງເປັນສູນ, ມັນມີຂອບດຽວກັບເນື້ອຫາ.
CSS Padding Values
padding CSS ສາມາດເອົາມູນຄ່າຄວາມຍາວທີ່ບໍ່ແມ່ນລົບ. ໃຫ້ແນ່ໃຈວ່າການກໍານົດການວັດແທກ, ເຊັ່ນ: px ຫຼື em. ນອກນັ້ນທ່ານຍັງສາມາດກໍານົດອັດຕາສ່ວນສໍາລັບ padding ຂອງທ່ານເຊິ່ງຈະເປັນເປີເຊັນຂອງຄວາມກວ້າງຂອງບລັອກທີ່ບັນຈຸຂອງອົງປະກອບ. ນີ້ປະກອບມີສໍາລັບ padding ເທິງແລະລຸ່ມ. ຍົກຕົວຢ່າງ:
#container {width: 800px height: 200px } #container p {width: 400px height: 75% padding: 25% 0 }ຄວາມສູງຂອງວັກໃນສ່ວນ # container ຈະເປັນ 75% ຂອງ height ຂອງ container + 25% ຂອງ width ສໍາລັບ padding ເທິງແລະ 25% ຂອງ width ສໍາລັບ padding ລຸ່ມ. ນີ້ທັງຫມົດ 300 + 200 + 200 = 700px.
ຜົນກະທົບຂອງການເພີ່ມ CSS Padding
ກ່ຽວກັບ ອົງປະກອບລະດັບຕັນ , ການບີບບັງຄັບແມ່ນຖືກນໍາໃຊ້ໃນສີ່ດ້ານ. ເນື່ອງຈາກວ່າອົງປະກອບແມ່ນບລັອກຫຼືກ່ອງແລ້ວ, ແຜ່ນຮອງຖືກນໍາໄປໃຊ້ກັບດ້ານລຸ່ມ.
ໃນເວລາທີ່ CSS padding ຖືກເພີ່ມເຂົ້າ ໃນອົງປະກອບເສັ້ນ , ອາດຈະມີການຜູກມັດບາງສ່ວນຂອງອົງປະກອບຂ້າງເທິງແລະຢູ່ຂ້າງລຸ່ມຂອງອົງປະກອບເສັ້ນໃນຖ້າ padding ຕັ້ງຂື້ນສູງກວ່າລະດັບເສັ້ນ, ແຕ່ມັນຈະບໍ່ເລັ່ງຄວາມສູງຂອງເສັ້ນລົງ. CSS padding ເບື້ອງຕົ້ນທີ່ນໍາໃຊ້ກັບອົງປະກອບໃນເສັ້ນຈະຖືກເພີ່ມໃສ່ຈຸດເລີ່ມຕົ້ນຂອງອົງປະກອບແລະສ່ວນທ້າຍຂອງອົງປະກອບ. ແລະແຜ່ນຮອງອາດລາກເສັ້ນ. ແຕ່ມັນຈະບໍ່ຖືກນໍາໃຊ້ກັບສາຍທັງຫມົດຂອງອົງປະກອບຫຼາຍເສັ້ນ, ດັ່ງນັ້ນທ່ານບໍ່ສາມາດໃຊ້ padding ເພື່ອເຂົ້າຫາສ່ວນຂອງເນື້ອຫາທີ່ມີເສັ້ນຫຼາຍເສັ້ນ.
ນອກຈາກນີ້, ໃນ CSS21, ທ່ານບໍ່ສາມາດສ້າງທ່ອນຖັງທີ່ມີຄວາມກວ້າງຂື້ນກັບອົງປະກອບທີ່ມີສ່ວນຮ້ອຍສໍາລັບ widths (ຫຼື width width). ຖ້າທ່ານເຮັດຜົນໄດ້ຮັບແມ່ນບໍ່ຖືກກໍານົດ. ຕົວທ່ອງເວັບຍັງຈະສະແດງເນື້ອຫາ, ແຕ່ທ່ານອາດຈະບໍ່ໄດ້ຮັບຜົນທີ່ທ່ານຄາດຫວັງ. ຖ້າທ່ານຄິດກ່ຽວກັບມັນ, ມັນເປັນຄວາມຮູ້ສຶກ, ດັ່ງທີ່ອົງປະກອບຂອງເຄື່ອງຂອງທ່ານຈໍາເປັນຕ້ອງຮູ້ຄວາມກວ້າງຂອງອົງປະກອບຂອງເດັກເພື່ອກໍານົດຄວາມກວ້າງຂອງມັນ, ເຊັ່ນວ່າມັນບໍ່ມີຄວາມກວ້າງທີ່ກໍານົດໄວ້ກ່ອນແລະຫນຶ່ງຫຼືຫຼາຍກວ່າ ຄວາມກວ້າງທີ່ກໍານົດໄວ້ເປັນເປີເຊັນຂອງອົງປະກອບຂອງຖັງ, ນີ້ສ້າງຕັ້ງຂຶ້ນເປັນວົງຈອນວົງທີ່ບໍ່ມີຄໍາຕອບ. ຖ້າທ່ານໃຊ້ສ່ວນຮ້ອຍສໍາລັບ widths ຂອງສິ່ງໃດແດ່ໃນເອກະສານຂອງທ່ານ, ທ່ານຄວນແນ່ໃຈວ່າ width width ຂອງອົງປະກອບແມ່ແມ່ນຖືກກໍານົດໄວ້.