css box model

#พื้นฐานการเขียนเว็ปไซต์

CSS Box Model คือ รูปแบบที่อธิบายวิธีการจัดการและจัดวางองค์ประกอบ HTML ในหน้าเว็บ โดยแต่ละองค์ประกอบจะถูกมองว่าเป็นกล่องสี่เหลี่ยมที่มีส่วนประกอบต่างๆ ดังนี้: เนื้อหา (Content), ระยะห่าง (Padding), ขอบ (Border), และระยะขอบ (Margin).

ส่วนประกอบของ CSS Box Model:

Content:

ส่วนที่แสดงเนื้อหาจริง ๆ ขององค์ประกอบ เช่น ข้อความ, รูปภาพ, หรือวิดีโอ.

Padding:

พื้นที่ว่างระหว่างเนื้อหากับขอบขององค์ประกอบ.

Border:

เส้นขอบที่ล้อมรอบเนื้อหาและระยะห่าง (padding).

Margin:

พื้นที่ว่างภายนอกขอบขององค์ประกอบ ซึ่งเป็นตัวกำหนดระยะห่างระหว่างองค์ประกอบนั้นกับองค์ประกอบอื่นๆ.

การทำงานของ Box Model:

เบราว์เซอร์ใช้ CSS Box Model ในการคำนวณขนาดและตำแหน่งขององค์ประกอบแต่ละชิ้นบนหน้าเว็บ. การทำความเข้าใจ Box Model ช่วยให้เราสามารถควบคุมการจัดวางและขนาดขององค์ประกอบได้อย่างแม่นยำ. การตั้งค่าคุณสมบัติต่างๆ เช่น ความกว้าง (width), ความสูง (height), ระยะห่าง (padding), ขอบ (border) และระยะขอบ (margin) จะมีผลต่อขนาดและรูปร่างของกล่อง.

ประโยชน์ของ Box Model:

การจัดวางองค์ประกอบ:

Box Model ช่วยให้เราสามารถควบคุมการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างแม่นยำ.

การกำหนดขนาด:

เราสามารถกำหนดขนาดขององค์ประกอบ (ความกว้าง, ความสูง) และพื้นที่ว่างรอบๆ เนื้อหา (padding, margin) ได้อย่างอิสระ.

การสร้างเลย์เอาต์ที่ซับซ้อน:

ด้วย Box Model เราสามารถสร้างเลย์เอาต์ที่ซับซ้อนและสวยงามได้.

ตัวอย่าง:

สมมติว่าเรามี div element ที่มีเนื้อหาเป็นข้อความ และเราต้องการให้มีระยะห่างรอบๆ ข้อความและมีเส้นขอบ เราสามารถใช้ Box Model เพื่อกำหนดค่าต่างๆ ดังนี้:

โค้ด

.my-element {

width: 200px; /* กำหนดความกว้างของเนื้อหา */

height: 100px; /* กำหนดความสูงของเนื้อหา */

padding: 20px; /* กำหนดระยะห่างรอบๆ เนื้อหา 20px */

border: 2px solid black; /* กำหนดเส้นขอบสีดำหนา 2px */

margin: 10px; /* กำหนดระยะขอบ 10px */

}

จากตัวอย่างนี้, กล่องของ .my-element จะมีเนื้อหา (ข้อความ), ระยะห่าง (padding) 20px, ขอบ (border) 2px, และระยะขอบ (margin) 10px.