Cara Mengelola Spasi dan Padding dalam Desain Responsif

Panduan praktis ini akan mengilustrasikan metode mengatur spasi dan padding dalam desain responsif.

Bagaimana Mengelola Spasi dan Padding dalam Desain Responsif?

Padding dan spasi dalam desain responsif dapat dikelola menggunakan CSS. Demonstrasi praktis pengelolaan spasi dan padding disajikan di bawah ini.

Langkah 1: Buat Struktur HTML

Pertama, buat struktur HTML dan beberapa teks di dalamnya menggunakan

Dan

tag:

< tubuh >
< h2 > Padding dan Spasi CSS Responsif < / h2 >
< div > Elemen CSS ini memiliki padding 80px dan spasi 40px. < / div >
< / tubuh >

Langkah 2: Terapkan CSS

---

---

Sekarang, mari terapkan CSS pada

menandai. Pertama, atur “ lapisan ” nilai properti menjadi “ 80 piksel ” untuk membuat ruang di sekitar elemen. Selanjutnya, atur “ batas ” nilai properti menjadi “ 40 piksel ” dan menciptakan ruang di sekitar elemen di luar batas. Terakhir, gunakan “ berbatasan ” properti dan tentukan batas dan warna untuk membuat batas:

div {
lapisan : 80 piksel ;
batas : 40 piksel ;
berbatasan : 1 piksel padat hijau ;
}

Output di atas mengonfirmasi bahwa spasi dan padding telah diterapkan.

Mari kita periksa apakah responsif atau tidak dengan mengontrak jendela browser:

Dengan mengontrak jendela, konten telah berperilaku responsif, yang mengonfirmasi bahwa padding dan spasi yang diterapkan responsif.

Kesimpulan

Untuk mengatur spasi dan padding dalam desain responsif, terdapat properti CSS. Untuk menambahkan padding dalam desain responsif menggunakan “ lapisan ' Properti. Demikian pula, spasi dapat ditambahkan dalam desain responsif menggunakan “ batas ' Properti. Tulisan ini telah memberikan solusi kepada pengguna untuk mengatur spasi dan padding dalam desain responsif.