CSS โมดูลหน้าต่างสรุป

CSS Box Model กำหนดว่าองค์ประกอบหรือองค์ประกอบของสื่อจะจัดการกับสื่อที่ประกอบด้วยpadding、border และ margin แบบนี้

CSS โมดูลหน้าต่างสรุป

CSS โมดูลหน้าต่าง

ส่วนภายในขององค์ประกอบเป็นสื่อที่แท้จริง และ padding รอบๆ สื่อนั้นเป็นพาดดิ้ง (padding) ที่แสดงระหว่างหลังผิวขององค์ประกอบ พาดดิ้ง (padding) จะแสดงพื้นหลังขององค์ประกอบ ขอบเขตของพาดดิ้ง (padding) คือ border และส่วนนอกจาก border คือ margin ค่ามาตราฐานของ margin คือโดยเฉลี่ยโดยไม่มีสี ดังนั้นจะไม่ปิดกั้นสื่อที่อยู่หลัง

คำแนะนำ:background ถูกปรับใช้สำหรับโซนที่ประกอบด้วยสื่อ พาดดิ้ง (padding) และ border

padding แบบ border และ margin นั้นเป็นทางเลือก ค่าเริ่มต้นคือ 0 แต่หลายองค์ประกอบจะถูกกำหนด margin และ padding โดยตัวประสานงานตัวแปร สามารถปรับขอบเขตนี้ด้วยการตั้งค่า margin และ padding ขององค์ประกอบเป็น 0 โดยเดี่ยวๆ หรือใช้ตัวเลือกกว้างทั้งหมดสำหรับการตั้งค่าทั้งหมดขององค์ประกอบ

* {
  margin: 0;
  padding: 0;

ใน CSS ค่า width และ height นั้นหมายถึงความกว้างและความสูงของโซนสื่อ การเพิ่ม padding แบบ border และ margin จะไม่ส่งผลต่อขนาดของโซนสื่อ แต่จะเพิ่มขนาดขององค์ประกอบตัวแปร

จงอธิบายเหตุผลของการกำหนด margin ที่มีความกว้าง 10 pixel และ padding ที่มีความกว้าง 5 pixel บนช่องทางทั้งหมดของกล่อง หากต้องการให้กล่องนี้มีขนาด 100 pixel ต้องการตั้งค่าความกว้างของสื่อในกล่องนี้เป็น 70 pixel ดูรูปแบบข้างล่าง:

ตัวอย่าง CSS โมดูลหน้าต่าง 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;

คำแนะนำ:padding แบบ border และ margin สามารถนำไปใช้สำหรับช่องทางทั้งหมดขององค์ประกอบหรือเพียงช่องทางเดียวโดยเฉพาะ

คำแนะนำ:margin สามารถมีค่าลบ และในหลายกรณี ความต้องการจะใช้ margin ลบ

ความเข้ากันกับเบราเซอร์

เมื่อกำหนด DTD ที่เหมาะสมสำหรับหน้าเว็บนี้ ส่วนใหญ่ของเบราเซอร์จะแสดงสื่อตามรูปแบบที่แสดงในภาพข้างต้น แต่ IE 5 และ 6 จะแสดงผลไม่ถูกต้องตามมาตราฐานของ W3C ความเป็นส่วนที่เกี่ยวข้องกับส่วนขององค์ประกอบสามารภายในประกาศฟีลเดอร์กำหนดโดยค่าของตัวแปร width ในขณะที่ค่า padding และ border รอบๆ สื่อนั้นจะคำนวณเป็นส่วนต่างกัน แต่อย่างไรก็ตาม IE5.X และ 6 ในโหมด Quirks จะใช้โมเดลที่ไม่เป็นมาตราฐานของตัวเอง ในบริเวณนี้ค่าของตัวแปร width ไม่ได้รับการกำหนดโดยความกว้างของสื่อ แต่แทนที่นั้นเป็นความกว้างของสื่อ พาดดิ้ง (padding) และ border ทั้งหมดของสื่อ

ถึงแม้จะมีวิธีที่จะแก้ปัญหานี้ แต่แนะนำที่ดีที่สุดคือหลีกเลี่ยงปัญหานี้ ก็คือ ไม่ใส่ padding ที่มีขนาดกว้างที่ระบุไว้ในตัวแปร แต่พยายามเพิ่ม padding หรือ margin ไปยังตัวแปรพ่อและลูก

การแปลวากย์

  • element : ส่วนประกอบ
  • padding : ช่องว่างด้านใน มีเอกสารบางส่วนที่แปลเป็นปิดล้อม
  • border : ขอบ
  • margin : ช่องว่างด้านนอก มีเอกสารบางส่วนที่แปลเป็นช่องว่างหรือช่องว่างขอบ

ใน codew3c พวกเราเรียก padding และ margin ว่า ช่องว่างด้านในและช่องว่างด้านนอก ช่องว่างด้านในคือช่องว่างในขอบ ช่องว่างด้านนอกคือช่องว่างนอกขอบ ง่ายที่จะจำได้ไหม:)