Cara Menguruskan Jarak dan Pelapisan dalam Reka Bentuk Responsif

Panduan praktikal ini akan menggambarkan kaedah untuk menguruskan jarak dan padding dalam reka bentuk responsif.

Bagaimana untuk Menguruskan Jarak dan Padding dalam Reka Bentuk Responsif?

Pelapik dan jarak dalam reka bentuk responsif boleh diurus menggunakan CSS. Demonstrasi praktikal pengurusan jarak dan padding disediakan di bawah.

Langkah 1: Buat Struktur HTML

Pertama, buat struktur HTML dan beberapa teks di dalamnya menggunakan

dan

tag:

< badan >
< h2 > Padding CSS Responsif dan Jarak < / h2 >
< div > Elemen CSS ini mempunyai padding 80px dan jarak 40px. < / div >
< / badan >

Langkah 2: Gunakan CSS

---

---

Sekarang, mari gunakan CSS pada

tag. Mula-mula, tetapkan ' padding ” nilai harta kepada “ 80px ” untuk membuat ruang di sekeliling elemen. Seterusnya, tetapkan “ margin ” nilai harta kepada “ 40px ” dan cipta ruang di sekeliling elemen di luar sempadan. Akhir sekali, gunakan ' sempadan ” dan nyatakan sempadan dan warna untuk mencipta sempadan:

div {
padding : 80px ;
margin : 40px ;
sempadan : 1px padu hijau ;
}

Output di atas mengesahkan bahawa jarak dan padding telah digunakan.

Mari semak sama ada ia responsif atau tidak dengan mengecutkan tetingkap penyemak imbas:

Dengan menguncup tetingkap, kandungan telah bertindak responsif, yang mengesahkan bahawa pelapik dan jarak yang digunakan adalah responsif.

Kesimpulan

Untuk mengurus jarak dan padding dalam reka bentuk responsif, terdapat sifat CSS. Untuk menambah padding dalam reka bentuk responsif menggunakan ' padding ” harta benda. Begitu juga, jarak boleh ditambah dalam reka bentuk responsif menggunakan ' margin ” harta benda. Tulisan ini telah membentangkan kepada pengguna penyelesaian untuk menguruskan jarak dan padding dalam reka bentuk responsif.