322 432 Web design Technology Computer Science Khon Kaen University

CSS Box Model

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

CSS Box Model

Words

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

Border (Cont.)

• border-top-width • border-top-style • border-top-color • border-top

ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นบน

• border-bottom-width • border-bottom-style • border-bottom-color • border-bottom

ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นล่าง

} }

Border (Cont.)

ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นซ้าย

• border-right-width • border-right-style • border-right-color • border-right

ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นขวา

} }

• border-left-width • border-left-style • border-left-color • border-left

CSS3 Borders

• border-radius • box-shadow

box-shadow: 10px 10px 5px #888888;

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 */

Example1 Border

เขียนอย่างไร?

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

Margin

margin-top margin-bottom margin-left margin-right margin

ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ autolength เช่น 5px, 5pt,5cm

ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ

ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ

ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ

ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุท่ีต้องการ ท้ัง 4 ด้าน กับวัตถุอ่ืน ๆ ในค าสั่งเดียว

Padding

Property Description

padding-top ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ

padding-bottom ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ

padding-left ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ

padding-right ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นขวา กบั ข้อความที่อยู่ในกรอบ

padding ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวขอ้งกับวตัถุด้านนอก)

<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

Example3

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

Summary

LAB#7 Box Model

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