Display with inline and block-level block

រាល់ tag របស់ HTML គឺសុទ្ធតែមានលក្ខណៈជា box។ ប៉ុន្តែ box មាន ២ ប្រភេទគឺ inline និង block box។ 

block box បង្កើតនូវការចុះបន្ទាត់ពីមុនវា និងពីក្រោយវា ដូចជា p, div, table, ul, ol, li …។ 

inline box មិនង្កើតនូវការចុះបន្ទាត់អ្វីទាំងអស់ ហើយវាស្ថិតនៅបន្ទាត់តែមួយជាមួយនឹង tag ដទៃទៀត។

inline box tag មានដូចជា <strong>, <em>, <a>, <img>។ ចំពោះ tag ប្រភេទនេះគេអាច កំណត់ padding, margin ឆ្វេងស្តាំ

បាន ប៉ុន្តែមិនអាចកំណត់ខាងលើនិងខាងក្រោមបានទេ។ ដើម្បីពង្រីកគេនូវ line-height ជំនួសវិញ។  ដើម្បីធ្វើការប្តូរនូវ

ប្រភេទ box របស់វាត្រូវកំណត់នូវ display របស់វាក្នុង CSS ដូចខាងក្រោម៖

display: 

display:[inline|block|none] 

Defining Border 

Border មាននូវលក្ខណៈបីត្រូវកំណត់គឺពណ៌ ទំហំនិង style របស់វា។ ចំពោះ style មានដូចខាងក្រោម៖

border:   

border: color width style; 

border: #AABB44 1px solid; 

សំរាប់កំណត់លក្ខណៈ របស់ជ្រុងទាំងបួន។

Each Border Edge: 

border-left: color width style: 

border-top: color width style: 

border-right: color width style: 

border-bottom: color width style:

Each Border Porperty

border-width: width; 

border-color: color; 

border-style: style;

Each Border Edge and Property 

border-left-color: color; 

border-top-style: style; 

...

background-color: 

background-color: color;

ប្រើសំរាប់កំណត់ពណ៌របស់ផ្ទៃខាងក្រោយរបស់ box។ 

overflow: 

overflow: visible|scroll|auto|hidden; 

គេប្រើវានៅពេលអក្សរនៅខាងក្នុងលើសទំហំដែលផ្ទុក។ ជាធម្មតាក្នុង IE វានឹងពង្រីកទំហំរបស់ប្រអប់អោយត្រូវនឹង

បរិមាណទំហំអក្សរ។ តែក្នុង browser ដទៃទៀតវានឹងធ្វើអោយអក្សរខាងក្នុង ហៀរចេញមកក្រៅ box។ ហេតុដូច្នេះ

គេប្រើនូវ overflow ដើម្បីដោះស្រាយបញ្ហានេះ។

·         visible ៖ គឺដូចធម្មតាគឺវានឹងបង្ហាញអក្សរដែលមាន

·         scroll ៖ គឺវាបង្កើតនូវ scrollbar ដើម្បីរំកិល។ វាបង្ហាញជានិច្ចបើទោះបីជាទំហំគ្រប់គ្រាន់ក៏ដោយ។

·         auto ៖ គឺដូចជា scroll តែវាមាន scrollbar តែពេលវាលើសទំហំប៉ុណ្ណោះ។ 

·         hidden ៖ គឺវាបង្ហាញតែអក្សរដែលស្ថិតនៅក្នុងដែនកំណត់របស់វាតែប៉ុណ្ណោះ។

Wrap Content with Floating Elements

float:

  float: left|right|none;

·         left : ប្រើសំរាប់ទាញអោយ Element ទៅផ្នែកខាងឆ្វេង និងអ្វីដែលនូវក្រោម នឹងមកឋិតនៅជាប់ខាងស្តាំនៃ element នោះ។

·         right : ប្រើសំរាប់ទាញអោយ Element ទៅផ្នែកខាងស្តាំនិងអ្វីដែលនៅក្រោមនឹងមកឋិតនៅជាប់ខាងឆ្វេងនៃ element នោះ។ 

·         none : ប្រើសំរាប់រំកិលមកទីតាំងដើមវិញ។

Background, Border with float Problem

ជាធម្មតាពេលយើងកំណត់នូវ style របស់ box អោយ float ទៅខាងស្តាំ តែក្នុងករណីយដែលយើងមាននូវ Element

ដែលនៅពីក្រោម ដែលតម្រូវអោយបំពេញតែផ្នែកខាងឆ្វេង វាមិនមានប្រសិទ្ធិភាពទៅលើ background និង border

ទេដូចបង្ហាញនៅរូបដំបូង។ ដើម្បីដោះស្រាយនូវបញ្ហានេះ ក្នុង style របស់ element ដែលមាន background, border

នោះត្រូវបន្ថែមនូវ overflow:hidden ទើបបាន ដូចកូដខាងក្រោម៖  

body{ 

 font-family:Georgia, "Times New Roman", Times, serif; 

}

h1{  

background-color:#CCCCCC;  

border:1px solid;  

overflow:hidden; 

} 

h2{  

margin-bottom:0px;  

border-bottom:2px dashed;  

color:#FF9933;  

overflow:hidden;  

zoom:1;//ប្រើចំពោះតែ IE 5 និង 6 ប៉ុណ្ណោះ ចំពោះ IE 7 មិនចាំបាច់ទេ 

} 

p{  

margin-top:0; 

}

#sidebar{  

background:rgb(227,108,10);  

border:#CC3300;  

float:right;  

width:250px;  

padding:20px;  

margin:20px; 

} 

* html #sidebar{ display:inline;} //ប្រើចំពោះតែ IE 5 និង 6  

clear: 

clear: left|right|both|none; 

ប្រើសំរាប់បង្គាប់អោយ element កុំអោយ  wrap បំពេញ element ដែលបាន float។ ការធ្វើបែបនេះ វាធ្វើអោយ  element

ធ្លាក់មកពីក្រោម element ដែល float។ 

·         left ៖ វានឹងធ្លាក់មកក្រោម element ដែល float ខាងឆ្វេងតែនៅបំពេញ element right float 

·         right ៖ វានឹងធ្លាក់មកក្រោម element ដែល float ខាងស្តាំតែនៅបំពេញ element left float

·         both ៖ វានឹងធ្លាក់មកក្រោម element ដែល float 

·         none ៖ វានឹងទៅបំពេញ element ដែល float។