ຄູ່ມວຍງານ CSS ການສ້າງບໍລິເວນກາງ

padding ຂອງບາງປະເພດຂອງບາງປະເພດແມ່ນ 70px.

ຄູ່ມວຍງານ CSS ການສ້າງບໍລິເວນກາງ

CSS padding ການສະແດງບາງການກຳນົດ padding ໃນບາງບັນດາການກຳນົດ ຂອງສານ.

ກໍຈະຄວບຄຸມ padding (fill) ຄົງຄວາມ. ບາງບັນດາການສາມາດກຳນົດ padding ສຳລັບທຸກສີ່ຂ້າງ (ຕົວ, ຊ້າຍ, ກາງ ແລະ ຊ້າຍ).

Padding - ທຸກຂ້າງທີ່ສະເພາະ

CSS ມີບາງການກຳນົດ padding ສຳລັບທຸກຂ້າງຂອງປະເພດ.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

ທຸກການກຳນົດ padding ສາມາດກຳນົດຄຸນນະພາບທີ່ລົງມານີ້:

  • length - ການກຳນົດ padding ດ້ວຍບາງອັນດັບ ອັມກີ, pt, cm ແລະອັນດັບອື່ນ.
  • % - ການກຳນົດ padding ດ້ວຍສີ່ວຽນຂອງບາງປະເພດຂອງບາງປະເພດຂອງບາງປະເພດຂອງບາງປະເພດ.
  • inherit - ການກຳນົດວ່າ padding ຄວນຖືກນຳມາຈາກປະຈຳພັນທະມິດ.

ຄຳແນະນຳ:ບໍ່ອະນຸຍາດມີຄຸນນະພາບລົງ.

ຄວາມຈິງ

ກໍຈະຈັດການການການຂອງ padding ສຳລັບທຸກສີ່ຂ້າງຂອງ <div>.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

ທ້າທາຍຕົວເອງ

Padding - ການຄົບຄວາມກຳນົດຫຼັກ

ກໍຈະຫຼຸດລະບຽບການຂັບເຂົ້າລະບຽບການຂອງບາງປະເພດຄິວານຂວາງ.

padding 属性是以下各内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的：

如果 padding 属性有四个值：

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • 下内边距是 75px
    • 左内边距是 100px

ຄວາມຈິງ

使用设置了四个值的 padding 简写属性：

div {
  padding: 25px 50px 75px 100px;
}

ທ້າທາຍຕົວເອງ

如果 padding 属性设置了三个值：

  • padding: 25px 50px 75px;
    • 上内边距是 25px
    • 右和左内边距是 50px
    • 下内边距是 75px

ຄວາມຈິງ

使用设置了三个值的 padding 简写属性：

div {
  padding: 25px 50px 75px;
}

ທ້າທາຍຕົວເອງ

如果 padding 属性设置了两个值：

  • padding: 25px 50px;
    • 上和下内边距是 25px
    • 右和左内边距是 50px

ຄວາມຈິງ

使用设置了两个值的 padding 简写属性：

div {
  padding: 25px 50px;
}

ທ້າທາຍຕົວເອງ

如果 padding 属性设置了一个值：

  • padding: 25px;
    • ປະເພດທັງສີ່ padding ແມ່ນ 25px

ຄວາມຈິງ

ການນຳໃຊ້ປະເພດ padding ທີ່ກຳນົດຄຳສັ່ງທີ່ມີຈຳນວນທີ່ຕາມກຳນົດ:

div {
  padding: 25px;
}

ທ້າທາຍຕົວເອງ

padding ແລະ width

CSS width ປະເພດຈະກຳນົດລະດັບວົງກວ້າງຂອງຂອບເຂດຂອງປະກອບຂໍ້ມູນ. ຂອບເຂດຂອງຂອບເຂດຈະຢູ່ໃນອານຸຮູບຂາຍຊ້າຍ, ບໍລິສຸກ, ແລະ ການກະກຽມຂອງປະກອບຂໍ້ມູນ (ກົງມັດ).

ດັ່ງນັ້ນ, ຖ້າປະກອບຂໍ້ມູນມີລະດັບວົງກວ້າງທີ່ກໍານົດ, padding ທີ່ເພີ່ມໃຫ້ປະກອບຂໍ້ມູນຈະເພີ່ມໃຫ້ລະດັບວົງກວ້າງທີ່ທັງໝົດ. ນີ້ຈະບໍ່ແມ່ນຜົນທີ່ຕ້ອງການ.

ຄວາມຈິງ

ໃນທີ່ນີ້, <div> ປະກອບຂໍ້ມູນມີລະດັບວົງກວ້າງ 300px. ແຕ່ວ່າລະດັບວົງກວ້າງທີ່ແທນຂອງ <div> ຈະເປັນ 350px (300px + padding-left 25px + padding-right 25px):

div {
  width: 300px;
  padding: 25px;
}

ທ້າທາຍຕົວເອງ

ຖ້າຢາກຮັກສາລະດັບວົງກວ້າງຂອງ <div> ເປັນ 300px ທັງໝົດທີ່ຈະມີການກະກຽມອານຸຮູບຂາຍຊ້າຍ, ມັນສາມາດນຳໃຊ້: box-sizing ປະເພດນີ້ຈະເຮັດໃຫ້ປະກອບຂໍ້ມູນຮັກສາລະດັບວົງກວ້າງ. ຖ້າມີການເພີ່ມ padding, ບ່ອນທີ່ສາມາດໃຊ້ເປັນຂອບເຂດຂອງຂອບຂໍ້ມູນຈະຫຼຸດລົງ.

ຄວາມຈິງ

ການນຳໃຊ້ປະເພດ box-sizing ເພື່ອຮັກສາລະດັບວົງກວ້າງຂອງ <div> ເປັນ 300px ທັງໝົດທີ່ຈະມີການກະກຽມອານຸຮູບຂາຍຊ້າຍ:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

ທ້າທາຍຕົວເອງ

ບົດສະແດງຫຼາຍຫຼາຍ

ການກະກຽມທາງລຸ່ມທີ່ຊ້າຍ
ບົດສະແດງວ່າແນະນຳການກະກຽມທາງລຸ່ມຂອງ <p> ປະກອບຂໍ້ມູນທີ່ຢູ່ທາງຊ້າຍ。
ການກະກຽມທາງລຸ່ມທີ່ຊ້າຍ
ບົດສະແດງວ່າແນະນຳການກະກຽມທາງລຸ່ມຂອງ <p> ປະກອບຂໍ້ມູນທີ່ຢູ່ທາງຊ້າຍ。
ການກະກຽມທາງລຸ່ມທີ່ສູງ
ບົດສະແດງວ່າແນະນຳການກະກຽມທາງລຸ່ມຂອງ <p> ປະກອບຂໍ້ມູນທີ່ຢູ່ທາງສູງ。
ການກະກຽມທາງລຸ່ມ
ບົດສະແດງວ່າແນະນຳການກະກຽມທາງລຸ່ມຂອງ <p> ປະກອບຂໍ້ມູນ。

ຂອບເຂດອານຸຮູບຂາຍຊ້າຍທັງໝົດ CSS

ປະເພດ ການອະທິບາຍ
padding ປະເພດຄຳແນະນຳທີ່ສາມາດກະກຽມຂອບເຂດອານຸຮູບຂາຍຊ້າຍທັງໝົດພາຍໃນການສະແດງຄຳສັ່ງດຽວກັນ。
padding-bottom ການກະກຽມທາງລຸ່ມຂອງປະກອບຂໍ້ມູນ。
padding-left ການກະກຽມຂອບເຂດອານຸຮູບຂາຍຊ້າຍຂອງປະກອບຂໍ້ມູນ。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

延伸阅读

ປື້ມການສຶກສາ:Box Model: CSS Padding