ប្រវែង

ទំហំប្រវែង និង កម្ពស់ (Width & Height)

Property width (ទទឹង) និង height (កម្ពស់) ត្រូវបានប្រើដើម្បីកំណត់ទំហំរបស់ Elements ជាពិសេសសម្រាប់រូបភាព វីដេអូ ឬប្រអប់ (Block-level elements)។ (ចំណាំ៖ Inline Elements ដូចជា <span> មិនអាចកំណត់ width/height បានទេ)។

១. ការកំណត់ Width និង Height ជា Pixel (px) ឬ ភាគរយ (%)

• ប្រើ Pixel (px)៖ ទំហំនឹងនៅថេររហូត ទោះបីអ្នកពង្រីក ឬបង្រួមអេក្រង់ក៏ដោយ។ (មិនសូវល្អសម្រាប់ទូរស័ព្ទដៃ)។
• ប្រើភាគរយ (%)៖ ពេញនិយមណាស់! ប្រអប់នឹងប្រែប្រួលទំហំទៅតាមទំហំអេក្រង់ (Fluid Design)។ ឧទាហរណ៍ width: 50%; វានឹងស៊ីទំហំពាក់កណ្តាលអេក្រង់ជានិច្ច។

២. ការបញ្ចៀសកុំអោយបែក Layout (Max-Width)

ប្រសិនបើអ្នកកំណត់ width: 500px; ប៉ុន្តែភ្ញៀវបើកមើលលើទូរស័ព្ទដែលមានអេក្រង់ត្រឹមតែ 400px នោះវិបសាយរបស់អ្នកនឹងលេចចេញនូវរបារអូសស្តាំឆ្វេង (Horizontal Scrollbar) ដែលជាកំហុសដ៏ធំបំផុតនៅក្នុងការរចនា!

ដំណោះស្រាយមាស (Max-Width)៖ អ្នកគួរតែប្រើ max-width: 500px; និង width: 100%; ជំនួសវិញ។ ពេលនោះ លើកុំព្យូទ័រវានឹងមានទំហំ 500px (ព្រោះវាមិនអាចធំជាងនេះទេ) ប៉ុន្តែពេលមើលលើទូរស័ព្ទ វានឹងរួមតូចស្វ័យប្រវត្តិមកត្រឹម 100% នៃអេក្រង់ទូរស័ព្ទ។

៣. Min-Height (កម្ពស់យ៉ាងហោចណាស់)

ប្រសិនបើអ្នកកំណត់ height: 200px; ពេលខ្លះអត្ថបទរបស់អ្នកវែងពេក វានឹងហូរចេញក្រៅប្រអប់ (Overflow) ព្រោះប្រអប់នោះរឹងកំព្រឹស មិនព្រមលូតតាមកម្ពស់អក្សរ។

ជំនួសមកវិញ គេតែងប្រើ min-height: 200px;។ ពេលអក្សរតិច ប្រអប់មានកម្ពស់ 200px តែបើសិនជាអក្សរច្រើន វាអាចរីកកម្ពស់បន្តចុះក្រោមទៀតដោយស្វ័យប្រវត្តិ!