CSS - รูปแบบของ Box

margin และ padding

margin คือ ระยะห่างระหว่างวัตถุ กับ วัตถุ
padding คือ ระยะห่างระหว่างขอบวัตถุ กับ ข้อความที่อยู่ในวัตถุนั้น

margin-top ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ มีค่าเป็น auto length เช่น 5px, 5pt,5cm
margin-bottom ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ
margin-left ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ
margin-right ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ
margin ใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว
padding-top ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ
padding-bottom ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ
padding-left ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ
padding-right ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ
padding ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)

การเขียนแบบย่อจะจัดเรียงตาม บน ขวา ล่าง ซ้าย เช่น margin: 10px 20px 10px 30px;

เรื่องของ border

เป็นการกำหนดรูปแบบของเส้นขอบ โดยใช้คำสั่งต่อไปนี้

border-style: ชื่อลักษณะของเส้นขอบ จะมีดังนี้
dotted (แบบจุด), dashed (แบบเส้นประ), solid (แบบทึบ), double (แบบเส้นคู่), groove (แบบร่อง 3D), ridge (แบบ ridged 3D), inset (แบบใบเสริม 3D), outset (แบบเริ่มแรก 3D)
border-width: ค่าความกว้างของเส้นขอบพร้อมหน่วย เช่น border-width: 5px;
border-color: ค่าสีของเส้นขอบ เป็นชื่อสีเช่น red หรือค่า #เลขฐานสิบหกก็ได้ เช่น border-color: red;

border: ใส่เส้นขอบของวัตถุ โดยเอาคำสั่งหลายคำสั่งมารวมกัน เช่น
border: 2px solid #FFFFFF; หมายความว่า กำหนดเส้นขอบความกว้าง 2px เป็นเส้นทึบสีขาว

border-bottom: ใส่กรอบด้านล่าง ตัวอย่างเช่น border-bottom: solid 1px #000000;
border-left: ใส่กรอบด้านซ้าย ตัวอย่างเช่น border-left: solid 1px #F8F8F8;
border-right: ใส่กรอบด้านขวา ตัวอย่างเช่น border-right: solid 1px #000000;
border-top: ใส่กรอบด้านบน ตัวอย่างเช่น border-top: solid 1px #FFFFFF;

ความกว้างและความสูงของวัตถุ

รูปแบบ
width: value กำหนดความกว้าง
height: value กำหนดความสูง

ค่า value มีดังนี้
- auto คือให้บราวเซอร์คำนวณความสูงให้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เช่น width: 100px;
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit คือ ใช้ค่าเดียวกับ element หลัก

ความกว้างและความสูงที่มากที่สุดของวัตถุ

รูปแบบ
max-height: value กำหนดความสูง
max-width: value กำหนดความกว้าง

ค่า value มีดังนี้
- none คือไม่กำหนดค่านี้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เป็น in, px, cm เป็นต้น
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit  คือ ใช้ค่าเดียวกับ element หลัก

ความกว้างและความสูงที่ต่ำที่สุดของวัตถุ

รูปแบบ
min-width: value
min-heith: value

ค่า value มีดังนี้
- none  คือไม่กำหนดค่านี้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เป็น in, px, cm เป็นต้น (มีเฉพาะ max-width)
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit  คือ ใช้ค่าเดียวกับ element หลัก