គម្លាត
The Box Model (Margin និង Padding)
មេរៀននេះគឺជា បេះដូងរបស់ CSS! រាល់ Element ទាំងអស់នៅក្នុង HTML ត្រូវបានចាត់ទុកថាជា "ប្រអប់ (Box)" មួយ។ The CSS Box Model គឺជាច្បាប់ដែលគ្រប់គ្រងពីរបៀបដែលប្រអប់ទាំងនោះត្រូវបានរុំព័ទ្ធដោយ Padding, Border និង Margin។
១. ស្គាល់សមាជិកទាំង ៤ នៃ Box Model
- Content (មាតិកាខាងក្នុងបំផុត)៖ គឺជាកន្លែងដែល អក្សរ ឬ រូបភាព របស់អ្នកបង្ហាញ។ (កំណត់ទំហំដោយ width & height)។
- Padding (ទ្រនាប់ខាងក្នុង)៖ គឺជាចន្លោះទំនេរពី Content ទៅដល់ស៊ុម Border (ប្រៀបដូចជាអេប៉ុងទ្រនាប់ការពារទំនិញក្នុងកេស)។
- Border (ស៊ុម)៖ បន្ទាត់ដែលហ៊ុំព័ទ្ធប្រអប់។
- Margin (គម្លាតខាងក្រៅ)៖ គឺជាការរុញប្រអប់របស់អ្នក អោយនៅឆ្ងាយពីប្រអប់របស់អ្នកដទៃ (ឬរុញអោយឆ្ងាយពីគែមអេក្រង់)។
២. វិធីសរសេរកាត់តម្លៃ (Shorthand Values)
អ្នកមិនបាច់សរសេរ padding-top, padding-right... គ្រប់ ៤ទិសនោះទេ! អ្នកអាចប្រាប់ទិសទាំង ៤ ក្នុងបន្ទាត់តែមួយ ដោយរាប់តាមទ្រនិចនាឡិកា (លើ - ស្តាំ - ក្រោម - ឆ្វេង) (Top - Right - Bottom - Left)។
margin: 10px 20px 30px 40px;(លើ១០, ស្តាំ២០, ក្រោម៣០, ឆ្វេង៤០)margin: 10px 20px 30px;(លើ១០, ស្តាំ/ឆ្វេង២០, ក្រោម៣០)margin: 10px 20px;(ប្រើច្រើនបំផុត) (លើ/ក្រោម១០, ស្តាំ/ឆ្វេង២០)margin: 10px;(គ្រប់ទិសទាំង ៤ ស្មើ ១០)
៣. វិធីដាក់ប្រអប់ចំកណ្តាល (Margin Auto)
នេះគឺជាល្បិចដ៏អស្ចារ្យដែលអ្នកបង្កើតវិបសាយគ្រប់រូបត្រូវតែចេះ! ប្រសិនបើអ្នកមានប្រអប់មួយដែលមានទំហំ (width) ច្បាស់លាស់ ហើយចង់អោយវារត់មកនៅចំកណ្តាលអេក្រង់ អ្នកគ្រាន់តែប្រើ margin: auto; ឬ margin: 0 auto; នោះវានឹងរុញចែកសងខាងអោយស្មើគ្នាដោយស្វ័យប្រវត្តិ។
៤. ការដោះស្រាយបញ្ហាប្រអប់រីកធំ (Box-Sizing)
តាមលំនាំដើម ប្រសិនបើប្រអប់អ្នកទទឹង 200px ហើយអ្នកថែម Padding 20px នោះប្រអប់អ្នកនឹងប៉ោងធំដល់ 240px! នេះជាបញ្ហាធំណាស់ ធ្វើអោយខូច Layout វិបសាយ។
ដំណោះស្រាយ៖ អ្នកអាជីពតែងតែបន្ថែម box-sizing: border-box; ទៅអោយគ្រប់ Elements ទាំងអស់ (ដោយប្រើសញ្ញា *)។ វាបង្ខំអោយប្រអប់រក្សាទំហំ 200px ដដែល ទោះបីដាក់ Padding ក៏ដោយ (វាស៊ីកន្លែងចូលក្នុងវិញ)។
box-sizing: border-box;
}