Styling List list-style-type:

list-style-type:[..|none]];

ប្រើជាមួយនឹង <ul>,<ol>,<li> tag ដែលគេប្រើសំរាប់បង្កើតជា List ។ យើងកំណត់នូវ style របស់ វាដូចខាងក្រោម៖

Disc ·         Item1 ·         Item2 ·         Item3	Cicle o   Item1 o   Item2 o   Item3	Square §  Item1 §  Item2 §  Item3
Decimal 1.       Item1 2.       Item2 3.       Item3	Decimal-Leading-Zero 01.   Item1 02.   Item2 03.   Item3	Uper-Alpha A.      Item1 B.      Item2 C.      Item3
Lower-Alpha a.       Item1 b.      Item2 c.       Item3	Uper-Roman                              I.            Item1                            II.            Item2                          III.            Item3	Lower-Roman                     i.            Item1                    ii.            Item2                  iii.            Item3

list-style-position:   

list-style-position:[inside|outside]; 

ប្រើសំរាប់កំណត់ថាតើ style របស់ list  ត្រូវស្ថិតនៅខាងក្រៅ ឬខាងក្នុងដូចខាងក្រោម៖ 

List-style-position: outside §  Iloren ipsum dolor emat, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. §  Ut visi enim ad minim veniam,quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. §  Tincidunt ut laoreet dolor magna aliquam erat volutpat nonummy nibh euismod tincid.	List -style-position: Inside §  Iloren ipsum dolor emat, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. §  Ut visi enim ad minim veniam,quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. §  Tincidunt ut laoreet dolor magna aliquam erat volutpat nonummy nibh                euismod tincid.
1.       Iloren ipsum dolor emat, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 2.       Ut visi enim ad minim veniam,quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. 3.       Tincidunt ut laoreet dolor magna aliquan erat volutpat nonummy nibh euismod tincid.	1.       Iloren ipsum dolor emat, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 2.       Ut visi enim ad minim veniam,quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. 3.       Tincidunt ut laoreet dolor magna aliquan erat volutpat nonummy nibh                euismod tincid.

                                                                                               

                                                                               

Remove indent of list item 

padding-left:0px;

 margin-left:0px;

ប្រើសំរាប់លុបរាល់គំលាតរបស់ list item។ 

list-style-image: 

list-style-image:url(images/bullet.jpg); 

ប្រើសំរាប់ដាក់នូវរូបភាពជំនួស style ចាស់។ 

Margins, Padding, and Borders

Understanding the Box Model

Box មាននូវ properties សំខាន់ៗមួយចំនួនដូចជា៖ 

·         Padding : ជាគំលាតរវាង content និង border របស់ content។

·         Border: គឺជាន្ទាត់ដែលគូសជុំវិញជ្រុងរបស់ box។ យើងអាចកំណត់ជ្រុងទាំងបួន និងជ្រុង នីមួយៗបាន។ 

·         Background-color: គឺផ្ទៃដែលស្ថិតនៅក្នុង border រួមទាំង padding ផងដែរ។ 

·         Margin: ជាគំលាតរវាង tag មួយទៅ tag មួយទៀត ដូចគំលាតខាងលើ និងខាងក្រោម របស់ p tag។

Define margin and padding

All Edge

margin:#px|#em|#%; 

padding: #px|#em|#%;

Specified Edge

margin-left:#px|#em|#%;

margin-right:#px|#em|#%;

margin-top: #px|#em|#%; 

margin-bottom:#px|#em|#%; 

padding-left:#px|#em|#%;

padding-right:#px|#em|#%;

padding-top: #px|#em|#%; 

padding-bottom:#px|#em|#%; 

Shorthand

margin: top right bottom left; //TRouBLe

padding: top right bottom left;  

ឧទាហរណ៍ ៖  margin: 0 10px 10px 20px; 

padding: 10px 0 10px 0;