គម្លាត
អំពីគម្លាត (Spacing)
គម្លាតនៅក្នុង CSS មានពីរប្រភេទសំខាន់:
- គម្លាតក្នុង (Padding) - គម្លាតរវាងមាតិកានិងគែមធាតុ
- គម្លាតក្រៅ (Margin) - គម្លាតរវាងធាតុនិងធាតុជុំវិញ
ភាពខុសគ្នាសំខាន់: Padding ស្ថិតនៅខាងក្នុងគែម ហើយ Margin ស្ថិតនៅខាងក្រៅគែម។
គម្លាតក្រៅ (Margin)
ដើម្បីបង្កើតគម្លាតក្រៅ ប្រើ margin property។ Margin បង្កើតគម្លាតនៅខាងក្រៅធាតុ។
ការកំណត់តម្លៃ Margin
Margin property អាចទទួលយកតម្លៃពី 1 ដល់ 4:
- 1 តម្លៃ:
margin: 10px;- ប្រើសំរាប់ទាំង៤ជ្រុង - 2 តម្លៃ:
margin: 10px 20px;- តម្លៃទី១ = លើ+ក្រោម, តម្លៃទី២ = ឆ្វេង+ស្តាំ - 3 តម្លៃ:
margin: 10px 20px 15px;- លើ, ឆ្វេង+ស្តាំ, ក្រោម - 4 តម្លៃ:
margin: 10px 20px 15px 25px;- លើ, ស្តាំ, ក្រោម, ឆ្វេង (តាមទិសម៉ោង)
កំណត់ជ្រុងដាច់ដោយឡែក (Individual Sides)
margin-top- កំណត់គម្លាតក្រៅខាងលើmargin-right- កំណត់គម្លាតក្រៅខាងស្តាំmargin-bottom- កំណត់គម្លាតក្រៅខាងក្រោមmargin-left- កំណត់គម្លាតក្រៅខាងឆ្វេង
Margin Auto (ដាក់កណ្តាល)
ប្រើ margin: auto; ដើម្បីដាក់ធាតុនៅកណ្តាល:
Margin អវិជ្ជមាន (Negative Margin)
អ្នកអាចប្រើតម្លៃអវិជ្ជមានដើម្បីរុញធាតុឲ្យជិតជាង:
Margin Collapse (ការរលាយ Margin)
នៅពេលធាតុពីរមាន margin-bottom និង margin-top, margin ធំជាងនឹងត្រូវប្រើ (មិនមែនបូកគ្នាទេ):
សំខាន់: Margin collapse កើតមានតែសំរាប់ vertical margins (top និង bottom) ប៉ុណ្ណោះ។
គម្លាតក្នុង (Padding)
ដើម្បីបង្កើតគម្លាតក្នុង គឺប្រើ padding property។ Padding បង្កើតគម្លាតរវាងមាតិកានិងគែម។
ការកំណត់តម្លៃ Padding
Padding property ប្រើរបៀបដូចគ្នានឹង margin:
- 1 តម្លៃ:
padding: 10px;- ប្រើសំរាប់ទាំង៤ជ្រុង - 2 តម្លៃ:
padding: 10px 20px;- លើ+ក្រោម, ឆ្វេង+ស្តាំ - 3 តម្លៃ:
padding: 10px 20px 15px;- លើ, ឆ្វេង+ស្តាំ, ក្រោម - 4 តម្លៃ:
padding: 10px 20px 15px 25px;- លើ, ស្តាំ, ក្រោម, ឆ្វេង
កំណត់ជ្រុងដាច់ដោយឡែក (Individual Sides)
padding-top- កំណត់គម្លាតក្នុងខាងលើpadding-right- កំណត់គម្លាតក្នុងខាងស្តាំpadding-bottom- កំណត់គម្លាតក្នុងខាងក្រោមpadding-left- កំណត់គម្លាតក្នុងខាងឆ្វេង
ចំណាំ: Padding មិនអាចមានតម្លៃអវិជ្ជមានបានទេ (ខុសពី margin)។
Box Sizing
box-sizing property កំណត់របៀបគណនាទំហំធាតុ:
content-box- width/height រាប់តែមាតិកា (លំនាំដើម)border-box- width/height រាប់បញ្ចូល padding និង border
ការពន្យល់:
• content-box: width 300px + padding 60px + border 10px = 370px
• border-box: width 300px រួមបញ្ចូលទាំង padding និង border
ឧទាហរណ៍ជាក់ស្តែង (Practical Examples)
1. ប័ណ្ណដែលមានគម្លាតស្អាត (Well-Spaced Card)
2. Grid Layout ដែលមាន Gap
3. Navigation Bar
4. Nested Elements (ធាតុជាន់គ្នា)
ការអនុវត្តល្អបំផុត (Best Practices)
1. ប្រើ box-sizing: border-box សំរាប់ទាំងអស់
បន្ថែមនេះនៅដើម stylesheet របស់អ្នក:
* {
box-sizing: border-box;
}2. ប្រើ margin សំរាប់ការផ្តាច់, padding សំរាប់គម្លាតក្នុង
Margin = គម្លាតរវាងធាតុ, Padding = គម្លាតក្នុងធាតុ។
3. ប្រើ margin: 0 auto; ដើម្បីដាក់កណ្តាល
វិធីងាយបំផុតដើម្បីដាក់ធាតុដែលមាន width នៅកណ្តាល។
4. ប្រយ័ត្នជាមួយ margin collapse
ចងចាំថា vertical margins អាចរលាយជាមួយគ្នា។
5. កំណត់ margin/padding លើជ្រុងជាក់លាក់
ជំនួសឲ្យ margin: 20px; ប្រើ margin-bottom: 20px; ប្រសិនបើត្រូវការតែជ្រុងមួយ។
6. ប្រើតម្លៃស្ថិរសំរាប់គម្លាត
ប្រើលេខដូចជា 5, 10, 15, 20, 30, 40 ដើម្បីរក្សាភាពស៊ីគ្នា។
7. ចៀសវាង padding អវិជ្ជមាន
Padding មិនទទួលយកតម្លៃអវិជ្ជមានទេ។ ប្រើ margin វិញ។