ចន្លោះ CSS គឺជាលក្ខណៈសម្បត្តិមួយនៃ គំរូប្រអប់ CSS ។ លក្ខណសម្បត្តិខ្លីនេះកំណត់ចន្លោះនៅជុំវិញជ្រុងទាំងបួនរបស់ធាតុ HTML ។ ចន្លោះ CSS អាចត្រូវបានអនុវត្តទៅស្ទើរតែរាល់ ស្លាក HTML (លើកលែងតែ ស្លាក មួយចំនួននៃតារាង) ។ លើសពីនេះទៀតគ្រប់ផ្នែកទាំង 4 នៃធាតុអាចមានតម្លៃខុសគ្នា។
ទ្រព្យសម្បត្តិ CSS Padding
ដើម្បីប្រើលក្ខណៈពិសេស CSS padding, អ្នកអាចប្រើ mnemonic "TROUBLe" (ឬ "TRiBbLe" សម្រាប់អ្នកអ្នកគាំទ្រ Star Trek) ។ នេះតំណាងឱ្យ កំពូល ខាងស្ដាំ បាត និង ខាងឆ្វេង ហើយវាសំដៅទៅលើលំដាប់នៃទទឹងចន្លោះដែលអ្នកបានកំណត់ក្នុងលក្ខណសម្បត្តិ។ ឧទាហរណ៍:
ចន្លោះ: ខាងលើខាងស្ដាំផ្នែកខាងក្រោមឆ្វេង; ចន្លោះ: 1px 2px 3px 6px;ប្រសិនបើអ្នកប្រើតម្លៃដែលបានរាយខាងលើវានឹងអនុវត្តតម្លៃចន្លោះផ្សេងគ្នាទៅគ្រប់ផ្នែកនៃធាតុ HTML អ្វីដែលអ្នកកំពុងអនុវត្តវា។ ប្រសិនបើអ្នកចង់អនុវត្តចន្លោះដូចគ្នាទាំងបួនជ្រុងអ្នកអាចធ្វើឱ្យ CSS របស់អ្នកសាមញ្ញនិងគ្រាន់តែសរសេរតម្លៃមួយ:
ចន្លោះ: 12px;ជាមួយបន្ទាត់នៃ CSS នោះទំហំ 12 ភិចសែលនឹងអនុវត្តទៅគ្រប់ 4 ផ្នែកនៃធាតុ។
បើអ្នកចង់ឱ្យចន្លោះដូចគ្នាសម្រាប់កំពូលនិងបាតនិងឆ្វេងនិងស្ដាំអ្នកអាចសរសេរតម្លៃពីរ:
ចន្លោះ: 24px 48px;តម្លៃទីមួយ (24px) នឹងអនុវត្តទៅខាងលើនិងបាតខណៈដែលទីពីរនឹងអនុវត្តទៅឆ្វេងនិងស្ដាំ។
ប្រសិនបើអ្នកសរសេរតម្លៃបីដែលនឹងធ្វើឱ្យចន្លោះបញ្ឈរ (ឆ្វេងនិងស្ដាំ) ដូចគ្នាខណៈដែលផ្លាស់ប្ដូរកំពូលនិងបាត:
ចន្លោះ: កំពូលខាងស្តាំនិងខាងឆ្វេង; ចន្លោះ: 0px 1px 3px;យោងទៅតាមម៉ូដែលប្រអប់ CSS ចន្លោះត្រូវបានគេជិតនឹងធាតុ / ខ្លឹមសារផ្ទាល់។ នេះមានន័យថាចន្លោះត្រូវបានបន្ថែមទៅធាតុរវាងទទឹងឬកម្ពស់មាតិកានិងតម្លៃស៊ុមណាមួយដែលអ្នកប្រើ។ បើចន្លោះត្រូវបានកំណត់ទៅសូន្យនោះវាមានគែមដូចនឹងមាតិកា។
តម្លៃ CSS Padding
ចន្លោះ CSS អាចយកតម្លៃប្រវែងអវិជ្ជមានណាមួយ។ ត្រូវប្រាកដថាបញ្ជាក់ពីការវាស់វែងដូចជា px ឬ em ។ អ្នកក៏អាចបញ្ជាក់ភាគរយសម្រាប់ចន្លោះរបស់អ្នកដែលនឹងជាភាគរយនៃទទឹងនៃប្លុករបស់ធាតុ។ នេះរួមបញ្ចូលទាំងចន្លោះខាងលើនិងខាងក្រោម។ ឧទាហរណ៍:
#container {width: 800px; កម្ពស់: 200 ភីក; } #container p {width: 400px; កម្ពស់: 75%; ចន្លោះ: 25% 0; }កម្ពស់របស់កថាខណ្ឌនៅក្នុងធាតុ #container នឹងមាន 75% នៃកម្ពស់ #container និង 25% នៃទទឹងសម្រាប់ចន្លោះខាងលើនិង 25% នៃទទឹងសម្រាប់ចន្លោះបាត។ សរុបទាំងនេះគឺ 300 + 200 + 200 = 700 ភី។
ផលប៉ះពាល់នៃការបន្ថែម CSS Padding
នៅលើ ធាតុប្លុកកម្រិត គម្លាតត្រូវបានអនុវត្តនៅលើជ្រុងទាំងបួន។ ដោយសារតែធាតុគឺជាប្លុកឬប្រអប់រួចហើយគម្លាតត្រូវបានអនុវត្តទៅផ្នែកប្រអប់។
នៅពេល CSS padding ត្រូវបានបន្ថែមទៅ ធាតុក្នុងបន្ទាត់ វាអាចមានធាតុត្រួតគ្នាជាច្រើននៅខាងលើនិងខាងក្រោមធាតុក្នុងតួប្រសិនបើចន្លោះបញ្ឈរលើសពីកម្ពស់បន្ទាត់ប៉ុន្តែវានឹងមិនធ្វើឱ្យកម្ពស់បន្ទាត់ថយចុះទេ។ បន្ទះ CSS ផ្ដេកបានអនុវត្តចំពោះធាតុក្នុងតួនឹងត្រូវបានបន្ថែមទៅដើមនៃធាតុនិងចុងបញ្ចប់នៃធាតុ។ និងចន្លោះអាចរុំបន្ទាត់។ ប៉ុន្តែវានឹងមិនអនុវត្តទៅគ្រប់បន្ទាត់នៃធាតុពហុបន្ទាត់ទេដូច្នេះអ្នកមិនអាចប្រើចន្លោះដើម្បីចូលបន្ទាត់នៃមាតិកាក្នុងបន្ទាត់ពហុបន្ទាត់។
ដូចគ្នានេះដែរនៅក្នុង CSS2.1 អ្នកមិនអាចបង្កើតប្លុកផ្ទុកដែលទទឹងអាស្រ័យលើធាតុដែលមានភាគរយសម្រាប់ទទឹង (ឬទំហំទទេ) ។ ប្រសិនបើអ្នកធ្វើការមិនបានកំណត់។ កម្មវិធីរុករកនឹងនៅតែបង្ហាញមាតិកាប៉ុន្តែអ្នកមិនអាចទទួលបានលទ្ធផលដែលអ្នករំពឹងទុក។ ប្រសិនបើអ្នកគិតអំពីវាវាសមហេតុផលប្រសិនបើធាតុដាក់របស់អ្នកត្រូវដឹងពីទទឹងនៃធាតុកូនរបស់វាដើម្បីកំណត់ទទឹងរបស់វាដូចជាពេលដែលវាមិនមានទទឹងដែលបានកំណត់ជាមុននិងមួយឬច្រើនបាន កំណត់ទទឹងដែលជាភាគរយនៃធាតុរបស់ឧបករណ៍ផ្ទុកនេះបង្កើតខ្សែសង្វាក់រង្វង់មួយដែលគ្មានចម្លើយ។ ប្រសិនបើអ្នកប្រើភាគរយសម្រាប់ទទឹងនៃឯកសារនៅលើឯកសាររបស់អ្នកអ្នកត្រូវប្រាកដថាទទឹងធាតុមេត្រូវបានកំណត់ផងដែរ។