Belajar Margin
Margin adalah sebuah property yang bisa digunakan untuk memberikan jarak antar masing-masing tag HTML. Sebagai contohnya, kita akan membuat dua objek kotak yang memiliki jarak antara objek kotak satu dengan yang lainnya dengan menggunakan tag <div>...</div>. Tulis script HTML dibawah ini pada file HTML :
<body> <div class="box"></div> <div class="box"></div> </body>Sekarang, silahkan tuliskan perintah di bawah ini pada file CSS :
.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
Setelah itu, simpan dan jalankan pada web browser Mozila Firefox. Maka hasilnya masing-masing objek kotak akan memiliki jarak 10 piksel seperti gambar dibawah ini :Property Margin ini kita bisa menentukan dari sudut mana jarak yang ingin kita tentukan. Jarak di bagian atas, bawah, kanan, ataupun kiri. Dengan menggunakan properti di bawah ini :
Margin-left: 10px;
Margin-right: 10px;
Margin-top: 10px;
Margin-bottom: 10px;
Belajar Padding
Nah, kita sudah bisa membuat jarak antara objek kotak satu dengan objek kotak yang lainnya. Namun bagaimana cara membuat jarak antara saat sebuah objek teks berada di dalam box.Untuk menentukan objek teks memiliki jarak dengan tepi pada objek kotak. Maka kita bisa menggunakan properti padding. Seperti apa contohnya. Silahkan tulis tag <div> pada file HTML kita seperti di bawah ini :
<div class="box">Hallo, saya adalah Text</div>Kemudian, silahkan tuliskan script CSS elemen berikut pada file CSS kita.
.box {
width: 100px;
background: red;
margin: 10px;
padding: 20px;
}
Silahkan simpan dan jalankan dengan menggunakan Mozila Firefox. Maka hasilnya akan seperti pada gambar di bawah ini :
Sama halnya dengan property Margin, property Padding ini kita bisa menentukan dari sudut mana jarak yang ingin kita tentukan. Jarak di bagian atas-kah, bawah-kah, kanan, atau kiri.
Padding: left;
Padding: right;
Padding: top;
Padding: bottom;
Dengan menggunakan property Margin dan Padding maka tampilan pada halaman website kita akan menjadi semaki rapih. Terus simak tutorial CSS berikutnya ya di Belajar Koding Yuk.
hi saya Badri Zaki &, saya seorang Web Developer. Saya suka belajar semua yang berhubungan dengan Coding.
6 comments
Click here for commentsartikelnya mantep ijin praktek pak.
Replykalau mengatur jarak antara kiri dan kanan bagaimana gan? terima kasih
Replyizin cobain kak, thanks sudah berbagi.
ReplyCara bikin coding chatt kaya watsapp gimana.?
ReplyTerimakasih sudah share ilmu tentang menggunakan margin dan padding di CSS.
ReplyTernyata menggunakan margin dan padding membuat tampilan website menjadi rapi.
Kunjungi juga website kampus saya http://www.atmaluhur.ac.id dan
website saya https://gianskr.mahasiswa.atmaluhur.ac.id
thanks gan
ReplyConversionConversion EmoticonEmoticon