เขียนระยะขอบของและช่องว่างภายใน CSS
ข้อมูลบางส่วนเกี่ยวกับระยะขอบและช่องว่างภายในใน CSS
ขอบและช่องว่างภายในเป็นระยะห่างสองประเภทที่สามารถเพิ่มลงในองค์ประกอบ HTML ได้โดยใช้ CSS ขอบคือช่องว่างภายนอกองค์ประกอบ ในขณะที่ช่องว่างภายในคือช่องว่างภายในองค์ประกอบ
ตัวอย่างวิธีใช้ระยะขอบและช่องว่างภายในใน CSS
div {
ระยะขอบ: 10px;
ช่องว่างภายใน: 20px;
}
ตัวอย่างนี้ เราได้เลือกองค์ประกอบ
ทั้งหมด และใช้ระยะขอบ 10 พิกเซลและช่องว่างภายใน 20 พิกเซล
นอกจากนี้เรายังสามารถระบุค่าระยะขอบและค่าช่องว่างภายในที่แตกต่างกันสำหรับด้านต่างๆ ขององค์ประกอบได้โดยใช้คุณสมบัติต่อไปนี้
ขอบบน ขอบขวา ขอบล่าง และขอบซ้าย: คุณสมบัติเหล่านี้ช่วยให้เราสามารถตั้งค่าขอบเฉพาะสำหรับแต่ละด้านขององค์ประกอบได้ ตัวอย่าง
div {
ขอบบน: 10px;
ขอบขวา: 20px;
ขอบล่าง: 30px;
ขอบซ้าย: 40px;
}
นอกเหนือจากคุณสมบัติเหล่านี้แล้ว ยังมีคุณสมบัติตัวเลขที่ช่วยให้คุณสามารถตั้งค่าระยะขอบหรือค่าช่องว่างภายในได้ในคราวเดียว
ระยะขอบ: คุณสมบัตินี้ตั้งค่าระยะขอบทั้งหมดพร้อมกัน ตามลำดับต่อไปนี้: บน ขวา ล่าง ซ้าย ตัวอย่าง
div {
ระยะขอบ: 10px 20px 30px 40px;
}
Padding: คุณสมบัตินี้จะตั้งค่า Padding ทั้งหมดพร้อมกัน ตามลำดับต่อไปนี้: บน, ขวา, ล่าง, ซ้าย ตัวอย่าง
div {
การขยาย: 10px 20px 30px 40px;
}
โดยรวมแล้ว ระยะขอบและช่องว่างภายในเป็นเครื่องมือสำคัญใน CSS สำหรับควบคุมระยะห่างและเค้าโครงขององค์ประกอบ HTML
ภาพแสดงตัวอย่าง
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
