home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Box Model: คู่มือทำความเข้าใจ

Browser ใช้ CSS box model กำหนดว่า element ควรปรากฏบน web page ยังไง Box model แสดงขนาด element และ border, padding, margins สามารถ style แต่ละส่วนแยกกันได้

ทุก element ถูกล้อมรอบด้วย box การเข้าใจกลไก boxes เป็นสิ่งจำเป็นสำหรับการจัดตำแหน่ง items บน web page ให้ตรงใจ

CSS box model ใช้กำหนดว่า box ควรปรากฏและจัดตำแหน่งอย่างไร model นี้อ้างถึง 4 ส่วนประกอบ—content, padding, border, margin—ที่รวมเป็น box ใน CSS บทเรียนนี้จะอธิบายพื้นฐาน CSS box model และส่วนหลักๆ

CSS Box Model

CSS box model เป็นโครงสร้างที่ใช้กับทุก boxes ใน CSS model นี้สั่ง browser ให้รู้ว่าส่วนต่างๆ ของ box สร้าง element ที่ปรากฏบน web page ยังไง Box model แสดง content, padding, border, margin ของ box

มาดูแต่ละ element ของ box model:

  • Content: เนื้อหาของ box ที่ text, forms, images, web elements อื่นๆ จะปรากฏ
  • Padding: ช่องว่างระหว่างเนื้อหา box และ border ของ box Padding โปร่งใส
  • Border: เส้นขอบรอบเนื้อหา box หรือรอบ padding ถ้าระบุ padding value
  • Margin: ช่องว่างระหว่างขอบนอกของ border และ elements อื่นๆ บน web page Padding โปร่งใส (หมายเหตุ: ควรเป็น Margin โปร่งใส)

มาอภิปรายแต่ละ component และการใช้งานทีละอย่าง

Content Area

Content area อยู่กลาง box model นี่คือที่ text, images, elements อื่นๆ ปรากฏใน web element ใช้ CSS properties height และ width กำหนดขนาด content area

โดย default ขนาด content area = ขนาด elements ภายใน ถ้ามีบรรทัดข้อความ box จะยาวและสูงเท่าบรรทัดนั้น

สมมติต้องการ design box สูง 200px กว้าง 200px ทำได้ด้วยโค้ด:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; } </style>

CSS Box Model: คู่มือทำความเข้าใจ กดปุ่มใน code editor ด้านบนเพื่อดู output ของ HTML/CSS code

ใช้ HTML

tag สร้าง paragraph ข้อความ จำไว้: ทุก element ใน web design อยู่ใน box ดังนั้น box model จึงใช้กับ

tag ใน CSS สร้าง rule ตั้ง height ของ

tags ทั้งหมดเป็น 200px และ width เป็น 200px

อ่านเพิ่ม: beginner's guide to CSS height and width

Padding Area

Padding area ขยาย content area สร้าง gap ระหว่างเนื้อหา box และ border ใช้สร้าง banners และ announcement elements

ใช้ CSS padding property สมมติต้องการ 25px padding รอบ box โค้ด:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; } </style>

CSS Box Model: คู่มือทำความเข้าใจ กดปุ่มใน code editor ด้านบนเพื่อดู output

ระบุ "padding" property = 20px สร้าง gap 20px ระหว่าง content area และ border ตอนนี้มี gap ระหว่าง box และขอบหน้า

Border Area

Border area คือที่ border ของ box จะปรากฏ Borders เป็น colored outlines นอก padding ใช้สีไหนก็ได้ มี built-in designs ให้เลือก

สมมติต้องการเพิ่ม light blue border กว้าง 5px รอบ box:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; } </style>

CSS Box Model: คู่มือทำความเข้าใจ กดปุ่มใน code editor ด้านบนเพื่อดู output

ใช้ CSS "border" property กำหนด light blue border กว้าง 5px solid style = เส้นเดียว สังเกต border ห่างจากเนื้อหาเพราะระบุ padding 20px

Margin Area

Margin area เป็นชั้นนอกสุดของ box model สร้าง empty gap แยก element จาก elements อื่นๆ บน web page

สมมติต้องการ space 10px ระหว่างสอง boxes:

<html> <p>This is a box.</p> <p>This is another box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; margin: 10px; } </style>

CSS Box Model: คู่มือทำความเข้าใจ กดปุ่มใน code editor ด้านบนเพื่อดู output

ครั้งนี้ระบุสอง boxes ใน HTML ใช้ "margin" property 10px ทำให้มี gap 10px ระหว่าง boxes สร้าง gap ระหว่าง border ของ boxes และ elements อื่นๆ

อ่านเพิ่ม: tutorial on CSS margin

Width และ Height Calculations

ข้อผิดพลาดมือใหม่: คิดว่า height/width ของ element รวม padding, margins, borders ผิด!

Height/width properties ตั้งค่า height/width ของ content area เท่านั้น ไม่นับ elements อื่นๆ

หากต้องการรู้ว่า complete box example ใช้พื้นที่เท่าไหร่ คำนวณจากค่าที่ระบุใน margin area example:

  • Height: 200px
  • Width: 200px
  • Padding: 20px
  • Margin: 10px
  • Border: 5px

คำนวณ width:

  • 200px (width) +
  • 40px (left และ right padding) +
  • 10px (left และ right border) +
  • 20px (left และ right margin)

รวม 270px

คำนวณ height: ใช้ height ของ box + top/bottom values ของ padding, border, margin

สรุป

CSS box model เป็นโครงสร้าง render element บน web page ทุก HTML element เป็น rectangular box Box model กำหนดว่า content, padding, border, margins ปรากฏอย่างไร

อยากเรียนรู้ design web pages ด้วย CSS เพิ่ม? ดู How to Learn CSS guide มี top learning resources