วิธีจัดการระยะห่างและช่องว่างภายในในการออกแบบที่ตอบสนอง

คู่มือเชิงปฏิบัตินี้จะแสดงวิธีจัดการระยะห่างและช่องว่างภายในในการออกแบบแบบตอบสนอง

วิธีจัดการระยะห่างและช่องว่างภายในในการออกแบบที่ตอบสนอง

ช่องว่างภายในและการเว้นวรรคในการออกแบบแบบตอบสนองสามารถจัดการได้โดยใช้ CSS การสาธิตการใช้งานจริงของการจัดการระยะห่างและช่องว่างภายในมีดังต่อไปนี้

ขั้นตอนที่ 1: สร้างโครงสร้าง HTML

ขั้นแรก สร้างโครงสร้าง HTML และข้อความบางส่วนภายในโดยใช้

และ

แท็ก:

< ร่างกาย >
< h2 > การขยายและการเว้นวรรค CSS ที่ตอบสนอง < / h2 >
< กอง > องค์ประกอบ CSS นี้มีช่องว่างภายใน 80px และระยะห่าง 40px < / กอง >
< / ร่างกาย >

ขั้นตอนที่ 2: ใช้ CSS

---

---

ตอนนี้เรามาใช้ CSS กับ

แท็ก ขั้นแรก ให้ตั้งค่า “ การขยายความ ” มูลค่าทรัพย์สินถึง “ 80px ” เพื่อสร้างพื้นที่รอบๆ องค์ประกอบ จากนั้นให้ตั้งค่า “ ระยะขอบ ” มูลค่าทรัพย์สินถึง “ 40px ” และสร้างพื้นที่รอบๆ องค์ประกอบที่อยู่นอกขอบเขต สุดท้ายนี้ ใช้เครื่องหมาย “ ชายแดน ” และระบุเส้นขอบและสีเพื่อสร้างเส้นขอบ:

กอง {
การขยายความ : : 80px ;
ระยะขอบ : : 40px ;
ชายแดน : : 1px แข็ง สีเขียว ;
}

ผลลัพธ์ข้างต้นเป็นการยืนยันว่ามีการใช้การเว้นวรรคและช่องว่างภายในแล้ว

มาตรวจสอบว่าตอบสนองหรือไม่โดยการหดตัวหน้าต่างเบราว์เซอร์:

โดยการย่อหน้าต่าง เนื้อหาจะทำงานตอบสนอง ซึ่งยืนยันว่าการเติมและการเว้นวรรคที่ใช้นั้นตอบสนอง

บทสรุป

ในการจัดการระยะห่างและช่องว่างภายในในการออกแบบแบบตอบสนอง มีคุณสมบัติ CSS อยู่แล้ว หากต้องการเพิ่มช่องว่างภายในในการออกแบบแบบตอบสนองโดยใช้เครื่องหมาย “ การขยายความ ' คุณสมบัติ. ในทำนองเดียวกัน คุณสามารถเพิ่มระยะห่างในการออกแบบที่ตอบสนองได้โดยใช้เครื่องหมาย “ ระยะขอบ ' คุณสมบัติ. บทความนี้ได้นำเสนอโซลูชันแก่ผู้ใช้ในการจัดการระยะห่างและช่องว่างภายในในการออกแบบที่ตอบสนอง