รายละเอียด Box category

Dreamweaver

ในบทก่อนเราได้ลองเขียน CSS กันแบบคร่าวกันแล้ว ในบทนี้เราจะลงรายละเอียดในส่วนของ Box category กัน รูปด้านล่างเป็นหน้าต่างของ Box category

เนื้อหาในบทนี้จะกล่าวกันโดยละเอียดในบท CSS layout อีกทีเพราะเป็นเรื่องที่มีรายละเอียดมาก

รายละเอียดในหมวด Box category

Box category ใช้จัดวัตถุต่างให้อยู่ในตำแหน่งที่เราต้องการเช่น จัดตัวหนังสือที่อยู่ใน ตาราง (Table) และจัดตำแหน่งของ <div> เราจะกล่าวโดยละเอียดกันในส่วนของ Table และ CSS layout

1.Width, Height เราใช้กำหนดความยาวและความสูง ของรูปภาพ หรือ <div> tag

2.Float จัดตำแหน่งของวัตถุให้ชิดซ้ายหรือชิดขวา

3.Clear คำสั่งจัดวัตถุไม่ให้มีการซ้อนทับกัน

4.Paddingจัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง

5.Marginเป็นการกำหนดระยะห่างระหว่างวัตถุเช่น กำหนดให้ข้อความห่างจาก ตาราง 1 cm , กำหนดระยะห่างระหว่างข้อความด้วยกัน , ระหว่างรูปกับตัวอักษร

รูปแสดงความแตกต่างระหว่าง margin กับ padding