ប្រើ CSS ដើម្បីសូន្យចេញពីរឹមនិងស៊ុមរបស់អ្នក

កម្មវិធីរុករកបណ្តាញនាពេលបច្ចុប្បន្ននេះបានធ្វើដំណើរដ៏វែងឆ្ងាយពីថ្ងៃឆ្កួតដែលជាប្រភេទនៃការឆ្លងកាត់កម្មវិធីរុករកណាមួយមានគំនិតចង់បាន។ កម្មវិធីរុករកបណ្តាញនាពេលបច្ចុប្បន្ននេះមានលក្ខណៈស្តង់ដារខ្លាំងណាស់។ ពួកវាលេងយ៉ាងល្អជាមួយគ្នានិងផ្តល់នូវការបង្ហាញទំព័រត្រឹមត្រូវតាមគ្រប់កម្មវិធីរុករកនានា។ នេះរួមបញ្ចូលទាំងកំណែចុងក្រោយបំផុតរបស់ Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari និងកម្មវិធីរុករកជាច្រើនបានរកឃើញនៅលើ ច្រើនឧបករណ៍ទូរស័ព្ទដែល ត្រូវបានប្រើដើម្បីចូលដំណើរការគេហទំព័រថ្ងៃនេះ។

ខណៈពេលដែលការរីកចម្រើនត្រូវបានធ្វើឡើងពិតប្រាកដនៅពេលដែលវាទាក់ទងនឹងកម្មវិធីរុករកអ៊ីនធឺណិតនិងរបៀបដែលវាបង្ហាញ CSS វានៅមានភាពមិនស៊ីសង្វាក់រវាងជម្រើសកម្មវិធីផ្សេងៗ។ មួយក្នុងចំណោមភាពមិនស៊ីគ្នាជាទូទៅគឺថាតើកម្មវិធីរុករកទាំងនោះគណនារឹមទំព័រចន្លោះនិងស៊ុមតាមលំនាំដើម។

ដោយសារតែទិដ្ឋភាពទាំងនេះនៃម៉ូដែលប្រអប់មានប្រសិទ្ធិភាពធាតុ HTML ទាំងអស់ហើយដោយសារតែវាមានសារៈសំខាន់នៅក្នុងការបង្កើតប្លង់ទំព័រការបង្ហាញមិនប្រែប្រួលមានន័យថាទំព័រមួយមើលទៅល្អនៅក្នុងកម្មវិធីរុករកតែមួយប៉ុន្តែមើលទៅបន្តិចនៅក្នុងមួយផ្សេងទៀត។ ដើម្បីដោះស្រាយបញ្ហានេះអ្នករចនាវិបសៃថ៍ជាច្រើនបានប្រែក្លាយទិដ្ឋភាពទាំងនេះនៃគំរូប្រអប់។ ការអនុវត្តនេះត្រូវបានគេស្គាល់ផងដែរថាជា "ការបង្រួមអប្បបរមា" សម្រាប់តម្លៃសម្រាប់រឹមទំហំផ្ទៃនិងព្រំ។

ចំណាំលើលំនាំដើមកម្មវិធីរុករក

កម្មវិធីរុករកបណ្ដាញទាំងអស់មានការកំណត់លំនាំដើមសម្រាប់ទិដ្ឋភាពបង្ហាញជាក់លាក់នៃទំព័រ។ ឧទាហរណ៍តំណខ្ពស់មានពណ៌ខៀវនិងគូសបន្ទាត់ពីក្រោមលំនាំដើម។ នេះគឺស្របតាមកម្មវិធីរុករកផ្សេងៗគ្នាហើយទោះបីជាវាជាអ្វីដែលអ្នករចនាភាគច្រើនផ្លាស់ប្ដូរដើម្បីឱ្យសមស្របទៅនឹងតម្រូវការនៃគម្រោងជាក់លាក់របស់ពួកគេក៏ដោយការពិតដែលពួកគេទាំងអស់ចាប់ផ្តើមជាមួយលំនាំដើមដូចគ្នាធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការធ្វើការផ្លាស់ប្តូរទាំងនេះ។ គួរឱ្យស្តាយតម្លៃលំនាំដើមសម្រាប់រឹមទំហំផ្ទៃតុនិងស៊ុមមិនពេញចិត្តកម្រិតដដែលនៃភាពស្ថិតស្ថេររបស់កម្មវិធីរុករក។

ការកំណត់តម្លៃធម្មតាសម្រាប់រឹមនិងរុំ

មធ្យោបាយដ៏ល្អបំផុតដើម្បីដោះស្រាយបញ្ហាគំរូប្រអប់មិនជាប់លាប់គឺត្រូវកំណត់រឹមនិងតម្លៃចន្លោះនៃធាតុ HTML ទៅជាសូន្យ។ មានវិធីពីរបីដែលអ្នកអាចធ្វើដូច្នេះគឺដើម្បីបន្ថែមក្បួន CSS នេះទៅកាន់សន្លឹករចនាប័ទ្មរបស់អ្នក:

* {margin: 0; ចន្លោះ: 0; }

ក្បួន CSS ប្រើតួអក្សរ * ឬអក្សរជំនួស។ តួអក្សរនោះមានន័យថា "ធាតុទាំងអស់" ហើយជាទូទៅវានឹងជ្រើសរើសធាតុ HTML ទាំងអស់ហើយកំណត់រឹមនិងចន្លោះទៅ 0 ។ ទោះបីជាក្បួននេះមិនជាក់លាក់ក៏ដោយព្រោះវាស្ថិតនៅក្នុងសន្លឹករចនាប័ទ្មខាងក្រៅរបស់អ្នកវានឹងមានលក្ខណៈពិសេសខ្ពស់ជាងកម្មវិធីរុករកលំនាំដើម។ តម្លៃធ្វើ។ ដោយសារលំនាំដើមទាំងនោះជាអ្វីដែលអ្នកកំពុងសរសេរជាន់គ្នារចនាប័ទ្មមួយនេះនឹងសម្រេចនូវអ្វីដែលអ្នកកំពុងកំណត់។

ជម្រើសមួយទៀតគឺអនុវត្តតម្លៃទាំងនេះទៅ HTML និងធាតុរាងកាយ។ ដោយសារតែធាតុផ្សេងទៀតនៅលើទំព័ររបស់អ្នកនឹងជាកូននៃធាតុទាំងពីរនេះល្បាក់ CSS គួរអនុវត្តតម្លៃទាំងនេះទៅធាតុផ្សេងទៀតទាំងអស់។

html, body {margin: 0; ចន្លោះ: 0; }

វានឹងចាប់ផ្តើមការរចនារបស់អ្នកនៅកន្លែងដដែលនៅលើកម្មវិធីរុករកទាំងអស់ប៉ុន្តែរឿងមួយដែលអ្នកត្រូវចងចាំនោះគឺនៅពេលដែលអ្នកបើកទំរឹមនិងចន្លោះទាំងអស់អ្នកនឹងត្រូវបើកឱ្យពួកគេត្រលប់មកវិញសម្រាប់ផ្នែកជាក់លាក់នៃទំព័រវ៉ិបសាយរបស់អ្នកដើម្បីសម្រេចបានរូបរាង។ និងមានអារម្មណ៍ថាការរចនារបស់អ្នកអំពាវនាវ។

ស៊ុម

អ្នកអាចគិត "ប៉ុន្តែគ្មានកម្មវិធីរុករកណាមានស៊ុមនៅជុំវិញធាតុរាងកាយតាមលំនាំដើម" ។ នេះមិនមែនជាការពិតទាល់តែសោះ។ កំណែចាស់របស់កម្មវិធី Internet Explorer មានស៊ុមដែលមានតម្លាភាពឬមើលមិនឃើញជុំវិញធាតុ។ លុះត្រាតែអ្នកកំណត់ស៊ុមទៅ 0 នោះព្រំដែននោះអាចរារាំងការរៀបចំប្លង់ទំព័ររបស់អ្នក។ ប្រសិនបើអ្នកសម្រេចចិត្តថាអ្នកនឹងបន្តគាំទ្រកំណែចាស់នៃ IE នេះអ្នកនឹងត្រូវការដោះស្រាយបញ្ហានេះដោយបន្ថែមចំណុចខាងក្រោមទៅរូបរាងរាងកាយនិង HTML របស់អ្នក:

HTML, រាងកាយ {
រឹម: 0px
ចន្លោះ: 0px;
ព្រំដែន: 0px;
}

ស្រដៀងគ្នាទៅនឹងរបៀបដែលអ្នកបិទរឹមនិងចន្លោះរាបស្មើរចនាប័ទ្មថ្មីនេះក៏នឹងបិទស៊ុមលំនាំដើមផងដែរ។ អ្នកក៏អាចធ្វើដូចគ្នាបានដែរដោយប្រើឧបករណ៍ចម្លងអក្សរជំនួសដែលបង្ហាញនៅក្នុងអត្ថបទ។

អត្ថបទដើមរបស់នាង Jennifer Krynin ។ កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 9 ខែកញ្ញាឆ្នាំ 2014 ។