ระยะขอบและช่องว่างภายในอาจสร้างความสับสนได้ เนื่องจากในบางแง่มุม สิ่งเหล่านี้ดูเหมือนสิ่งเดียวกัน: พื้นที่สีขาวรอบๆ รูปภาพหรือวัตถุ นี่คือสิ่งที่นักออกแบบเว็บไซต์จำเป็นต้องรู้เกี่ยวกับความแตกต่างของพวกเขา
แพดดิ้ง
Padding คือช่องว่างระหว่างรูปภาพหรือเนื้อหาของเซลล์กับเส้นขอบภายนอก ในภาพด้านล่าง ช่องว่างภายในคือพื้นที่สีเหลืองรอบๆ เนื้อหา ในกรณีนี้ ช่องว่างภายในจะครอบคลุมเนื้อหาทั้งหมด: ด้านบน ด้านล่าง ด้านขวา และด้านซ้าย คุณสามารถระบุจำนวนช่องว่างภายใน (เป็นเปอร์เซ็นต์ พิกเซล จุด ฯลฯ) สำหรับแต่ละด้าน และไม่จำเป็นต้องเหมือนกัน ด้วยวิธีนี้ คุณสามารถวางตำแหน่งเนื้อหาภายในองค์ประกอบได้
ระยะขอบ
ในทางตรงกันข้าม ระยะขอบคือช่องว่างนอกเส้นขอบขององค์ประกอบ ระหว่างองค์ประกอบกับสิ่งที่อยู่ติดกัน ในภาพ ระยะขอบคือพื้นที่สีขาวนอกวัตถุทั้งหมด เช่นเดียวกับช่องว่างภายใน ระยะขอบจะล้อมรอบเนื้อหาทั้งหมดในตัวอย่างนี้: ที่ด้านบน ด้านล่าง ด้านขวา และด้านซ้าย คุณสามารถใช้ระยะขอบเพื่อวางตำแหน่ง div และองค์ประกอบอื่นๆ บนหน้า
ทดสอบหน้าเว็บของคุณในเบราว์เซอร์ ระบบปฏิบัติการ (รวมถึงอุปกรณ์เคลื่อนที่) และขนาดหน้าจอต่างๆ เสมอเพื่อให้แน่ใจว่าหน้าเว็บจะแสดงตามที่คุณต้องการ
