1. 322 432 Web design Technology
Computer Science Khon Kaen University

2. CSS Box Model

3. o Margin – การเคลียร์ขอบนอก หรือการเว้นว่างขอบนอก
o Border – ขอบรอบๆ padding หรือรอบๆ Content
o Padding – การเคลียร์พื้นที่ภายในขอบ หรือการเว้นว่างขอบใน
o Content - เนื้อหาของ Box
CSS Box Model
Words

4. Border
Property Description Value Example
border-width ใช้กาหนดขนาดของ
กรอบของวัตถุทั้ง 4 ด้าน
thin
medium
thick
length
10 px;, 10 pt;
border-style ใช้การกาหนดลักษณะ
ของกรอบของวัตถุทั้ง 4
ด้าน
none, hidden,
dotted, dashed,
solid, double,
groove, ridge,
inset, outset

5. Border (Cont.)
• border-top-width
• border-top-style
• border-top-color
• border-top
ใช้กาหนดคุณสมบัติให้กับกรอบด้านบน
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-bottom
ใช้กาหนดคุณสมบัติให้กับกรอบด้านล่าง
}
}

6. Border (Cont.)
ใช้กาหนดคุณสมบัติให้กับกรอบด้านซ้าย
• border-right-width
• border-right-style
• border-right-color
• border-right
ใช้กาหนดคุณสมบัติให้กับกรอบด้านขวา
}
}
• border-left-width
• border-left-style
• border-left-color
• border-left

7. CSS3 Borders
• border-radius
• box-shadow
box-shadow: 10px 10px 5px #888888;

8. CSS3 Borders
• border-image
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
/* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round;
/* Opera */

9. Example1 Border
เขียนอย่างไร?
Box1 ขอบ Solid สีเขียว ขนาด 5px
Box2 กาหนด เส้นขอบบนล่างเป็นจุด ขอบซ้ายขวาเป็น Solid สีแดง
Box3 กาหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น
10px และขนาดเส้นกรอบ ล่าง เป็น 20px

10. Margin
margin-top
margin-bottom
margin-left
margin-right
margin
ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ
autolength เช่น 5px, 5pt,5cm
ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ
ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ
ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ
ใช้กาหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4
ด้าน กับวัตถุอื่น ๆ ในคาสั่งเดียว

11. Padding
Property Description
padding-top ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ
ข้อความที่อยู่ในกรอบ
padding-bottom ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ
ข้อความที่อยู่ในกรอบ
padding-left ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ
ข้อความที่อยู่ในกรอบ
padding-right ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ
ข้อความที่อยู่ในกรอบ
padding ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ
ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)

12. <div style="margin:20px; padding:20px; border:20px solid blue">
Massage in Box <br />
Padding Margin Border<br />
Example lab#7 Box Model 322432 Web design technology Computer
Science
Khon Kaen University
</div>
Copyright by 322432 Web design technology Computer Science Khon
Kaen University
Example2 Margin, Padding

13. Example3
Line1 font > Comic Sans MS size 36px
Line2 ห่างจากขอบบน/ล่าง 25 px
Line3 ขอบจุด มีขีดเส้นใต้ จัดอยู่ตรงกลาง กาหนดขนาดช่องว่างระหว่างคา 1 em

14. Summary

15. LAB#7 Box Model
จุดประสงค์: เรียนรู้ Border, Margin and Padding
คาสั่ง: ให้ นศ. สร้าง Box Model โดยใช้ HTML5&CSS ในการออกแบบ
ให้ใช้ CSS แบบ External file โดยมีทั้งหมด 3 box ออกแบบใส่ข้อความ
จัดตัวอักษร ให้สวยงาม