គម្លាត

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

គម្លាត​នៃ​ធាតុ​មាន ២ គឺ ៖

គម្លាត​ក្រៅ

ដើម្បី​កំណត់​គម្លាត​ក្រៅ ត្រូវ​ប្រើ margin ។

តម្លៃ

តម្លៃ​របស់​វា យើង​ត្រូវ​កំណត់ ៤ ឬ​តិចជាង ៖

  • ១​តម្លៃ ៖ ទាំង​៤​ជ្រុង ។
  • ២​តម្លៃ ៖
    • តម្លៃ​ទី​១ គឺ​ជ្រុង​លើ និងក្រោម ។
    • តម្លៃ​ទី២ គឺ​ជ្រុងស្ដាំ និង​ឆ្វេង ។
  • ៣​តម្លៃ ៖
    • តម្លៃ​ទី១ គឺ​ជ្រុង​លើ ។
    • តម្លៃ​ទី​២ គឺ​ជ្រុង​ស្ដាំ និង​ឆ្វេង ។
    • តម្លៃ​ទី​៣ គឺ​ជ្រុង​ក្រោម ។
  • ៤​តម្លៃ ៖ តាម​លំដាប់ លើ ស្ដាំ ក្រោម ឆ្វេង ។
div {
    background-color: green;
    color: white;
}
#b {
    margin: 20px 50px;
}
<div>ប្រអប់​មួយ</div>
<div id="b">ប្រអប់​ពីរ</div>
<div>ប្រអប់​បី</div>
កំណត់​ដោយឡែក​ពី​គ្នា
Property បម្រើបម្រាស់
margin-top កំណត់​គម្លាត​ក្រៅ​ខាង​លើ ។
margin-right កំណត់​គម្លាត​ក្រៅ​ខាង​ស្ដាំ ។
margin-bottom កំណត់​គម្លាត​ក្រៅ​ខាង​ក្រោម ។
margin-left កំណត់​គម្លាត​ក្រៅ​ខាង​ឆ្វេង ។

គម្លាត​ក្នុង

ដើម្បី​កំណត់​គម្លាត​ក្នុង ត្រូវ​ប្រើ padding ។ តម្លៃ​របស់​វា គឺ​មាន​ប្រតិកម្ម​ទៅ​តាម​ជ្រុង​ដូច​នឹង margin ដែរ ។ ហើយ​ក៏​យើង​អាច​កំណត់​ជ្រុង​នីមួយៗ​ដាច់ដោយ​ឡែក​ពី​គ្នាបាន​ដែរ ។

ជ្រុង​នីមួយៗ​នៃ​គម្លាត​ក្នុង
Property បម្រើបម្រាស់
padding-top កំណត់​គម្លាត​ក្នុង​ខាង​លើ ។
padding-right កំណត់​គម្លាត​ក្នុង​ខាង​ស្ដាំ ។
padding-bottom កំណត់​គម្លាត​ក្នុង​ខាង​ក្រោម ។
padding-left កំណត់​គម្លាត​ក្នុង​ខាង​ឆ្វេង ។
div {
    background-color: green;
    color: white;
}
#a {
    margin-left: -25px;
    padding-top: 15px;
}
#b {
    margin: 10px 25px;
}
#c {
    padding: 15px 25px 10px;
}
<div id="a">ប្រអប់​មួយ</div>
<div id="b">ប្រអប់​ពីរ</div>
<div id="c">ប្រអប់​បី</div>

ទំហំ​ប្រអប់

width វា​មិន​រាប់​បញ្ចូល​គម្លាត​ក្នុង និង​គែម​នោះ​ទេ ។ តែ​យើង​អាច​កំណត់​ឲ្យវា​រាប់​បញ្ចូល​បាន ដោយ​ប្រើ box-sizing ។

តម្លៃ​នៃ box-sizing
តម្លៃ បម្រើបម្រាស់
content-box ប្រវែង មិន​រាប់​បញ្ចូល​គែម និង​គម្លាត​ក្នុង ។ (តម្លៃ​ដើម)
border-box ប្រវែង រាប់​បញ្ចូល​ទាំង​គែម ទាំង​គម្លាត​ក្នុង (មិន​រាប់​គម្លាត​ក្រៅ)
.a {
    width: 200px;
    padding: 25px;
    background: pink;
    border: 5px solid green;
    margin-bottom: 25px;
}
#b {
    box-sizing: border-box;
}
<div class="a">ប្រអប់​ទាំង​២​មាន​គម្លាត​ក្នុង​និង​គែម​ដូចគ្នា តែមួយ​នេះ គ្មាន box-sizing: border-box; ទេ</div>
<div class="a" id="b">ប្រអប់​ទាំង​២​មាន​គម្លាត​ក្នុង​និង​គែម​ដូចគ្នា តែ​មួយ​នេះ មាន box-sizing: border-box;</div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត