ความแตกต่างระหว่างระยะขอบและการเติม

2024 ผู้เขียน: Alex Aldridge | [email protected]. แก้ไขล่าสุด: 2023-12-17 13:51

ระยะขอบเทียบกับแพ็ดดิ้ง

ความแตกต่างระหว่างระยะขอบและการเติมเป็นส่วนสำคัญใน CSS เนื่องจากระยะขอบและช่องว่างภายในเป็นแนวคิดสำคัญสองประการที่ใช้ใน CSS เพื่อให้มีระยะห่างระหว่างรายการต่างๆ ช่องว่างภายในและระยะขอบใช้แทนกันได้และมีวัตถุประสงค์ต่างกัน ดังนั้นต้องใช้อย่างเหมาะสม padding คือช่องว่างระหว่างเนื้อหาและเส้นขอบของบล็อก ในทางกลับกัน ระยะขอบคือช่องว่างนอกเส้นขอบของบล็อก Margin แยกบล็อคออกจากบล็อคที่อยู่ติดกัน ในขณะที่ padding แยกเส้นขอบออกจากเนื้อหา

แพดดิ้งคืออะไร

ใน CSS (Cascading Style Sheets) ช่องว่างภายในคือช่องว่างระหว่างเนื้อหาและเส้นขอบมันแยกเนื้อหาของบล็อกออกจากขอบ ช่องว่างภายในมีความโปร่งใสและรวมถึงภาพพื้นหลังหรือสีพื้นหลังขององค์ประกอบด้วย จำนวนช่องว่างภายในขององค์ประกอบถูกระบุโดยใช้คำว่า "padding" ในโค้ด CSS ตัวอย่างเช่น หากต้องการเพิ่มช่องว่างภายในขนาด 25px รอบ ๆ โค้ดต่อไปนี้ สามารถใช้โค้ดได้

div {

กว้าง: 300px;

สูง: 300px;

padding: 25px;

เส้นขอบ: ทึบ 25px;

}

หากจำเป็น สามารถระบุค่าช่องว่างภายในที่แตกต่างกันสำหรับด้านซ้าย ขวา บน และล่างได้เช่นกัน รหัสต่อไปนี้ระบุค่าช่องว่างภายในที่แตกต่างกันสำหรับแต่ละด้าน

div {

กว้าง: 300px;

สูง: 300px;

padding-top: 25px;

padding-bottom: 35px;

padding-left: 5px;

padding-right: 10px;

เส้นขอบ: ทึบ 25px;

}

มาร์จิ้นคืออะไร

ใน CSS (Cascading Style Sheets) ระยะขอบคือช่องว่างนอกเส้นขอบ มันแยกบล็อกออกจากบล็อกอื่น ๆ ระยะขอบยังโปร่งใส แต่ความแตกต่างอย่างมากกับการเติมคือระยะขอบไม่รวมภาพพื้นหลังหรือสีพื้นหลังที่ใช้กับองค์ประกอบ จำนวนมาร์จิ้นใน CSS ถูกกำหนดโดยใช้คำว่า “มาร์จิ้น” โค้ดต่อไปนี้ใช้ระยะขอบ 25px รอบบล็อก div

div {

กว้าง: 320px;

สูง: 320px;

เส้นขอบ: ทึบ 5px;

ระยะขอบ: 25px;

}

สามารถระบุค่าที่แตกต่างกันสำหรับด้านต่างๆ ของบล็อกได้เช่นกัน โค้ดต่อไปนี้ใช้ค่า margin ที่แตกต่างกันสำหรับแต่ละด้าน

div {

กว้าง: 320px;

สูง: 320px;

เส้นขอบ: ทึบ 5px;

ขอบบน: 25px;

ระยะขอบ-ล่าง: 35px;

ระยะขอบซ้าย: 5px;

ระยะขอบขวา: 10px;

}

ความแตกต่างระหว่าง Margin และ Padding คืออะไร

• Padding คือช่องว่างระหว่างเส้นขอบและเนื้อหาในขณะที่ระยะขอบคือช่องว่างนอกเส้นขอบ

• Padding แยกเนื้อหาของบล็อกออกจากเส้นขอบ ระยะขอบแยกหนึ่งบล็อกจากอีกบล็อก

• การเติมประกอบด้วยภาพพื้นหลังและสีพื้นหลังที่ใช้กับเนื้อหาในขณะที่ระยะขอบไม่มีเนื้อหาดังกล่าว

• ระยะขอบของบล็อกที่อยู่ติดกันสามารถทับซ้อนกันได้ในขณะที่ช่องว่างภายในไม่ทับซ้อนกัน

สรุป:

การเติมเทียบกับมาร์จิ้น

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