Cara Mengatur Padding dan Margins Pada CSS

Tutorial kali ini, kita akan belajar tentang cara mengatur ukuran padding dan margins pada CSS. Sebelumnya kamu dapat melihat Cara Mengatur Colors dan Backgrounds Pada CSS untuk mengetahui cara memasukkan warna sekaligus latar belakang pada CSS. Perlu kamu ketahui bahwa kegunaan properti padding dan margin mempunyai makna yang sama tetapi berbeda fungsi.

Padding berfungsi untuk menghasilkan ukuran di sekitar konten sedangkan margins berfungsi untuk menghasilkan ukuran di sekitar elemen. Lalu perbedaan lainnya adalah padding membersihkan area di sekitar konten elemen sedangkan margins mengatur ukuran ruang putih di luar perbatasan.

Contoh kodingan padding dan margins dapat kamu lihat dibawah ini.

See the Pen #7 margin-padding 1 by lintangzakti (@zakti13) on CodePen.

Contoh penulisan kodingan css yang lebih sedikit sebagai berikut.

See the Pen #7 margin-padding 2 by lintangzakti (@zakti13) on CodePen.

Sekarang kamu sudah tahu perbedaan antara padding dan margins. Namun jika kamu mempunyai masalah dengan ukuran yang tidak berubah, mungkin ukuran tersebut melebih batas lebar dan tinggi elemen. Seperti kamu mempunyai elemen yang lebar dan tinggi 500px dan memakai margin 100px 150px 100px 200px maka margin tersebut sudah melebih batas.

Mudah bukan? Terima kasih sudah berkunjung di blog ini. Saya harap tutorial ini bermanfaat bagi kalian yang sedang mencari pembelajaran tentang programming. Artikel menarik lainnya dapat kamu temukan di blog ini ya.

Cara Membuat Border dan Tipe Pada CSS #5

Jika kamu ingin mencoba, silahkan kamu masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.