Skip to main content

Margin Dan Padding Pada Blog

Bagi sebagian blogger di antara kita pasti ada yang sudah kenal dengan istilah margin dan padding dalam blog. Hal ini terutama dapat kita ketahui dari blogger yang gemar mengutak-atik template blog miliknya. Karena, secara langsung maupun tidak langsung saat kita memodifikasi template blog pasti akan berkaitan dengan margin dan padding blog ini.

 

Margin dan padding blog berguna untuk mengatur tampilan dalam postingan blog kita. Dengan pengaturan margin dan padding yang pas, maka tampilan postingan dalam blog kita pun akan semakin terlihat menawan. Akan tetapi, saat kita salah dalam memahami dan memberikan pengaturan margin dan padding ini, bisa-bisa tampilan blog kita menjadi kacau, rumit, dan tidak sedap untuk dipandang mata.

Sebelum membahas mengenai margin dan padding, ada baiknya jika kita mengetahui terlebih dahulu apa yang dimaksud dengan border. Border merupakan garis yang membingkai postingan dalam blog kita. Biasanya kode HTML sebuah border berurutan mulai ukuran border, jenis border, dan warna border.

Contoh : border:1px dotted #000000;
Maksudnya adalah ;
  • Tebal garis border 1px.
  • Jenis garis border adalah dotted (putus-putus).
  • Warna border adalah hitam.
  • Untuk keterangan lebih lengkapnya mengenai jenis border dan cara membuatnya dapat kita lihat di sini.

Margin.

Berdasarkan pada ilustrasi gambar di atas dapat kita ketahui jika margin merupakan jarak antara border dengan sisi luarnya.

Kode HTML untuk margin biasanya tertulis sebagai berikut ;

margin:5px 6px 7px 8px;

Arti dari kode di atas yaitu ;
  1. Jarak setelah border dengan bagian luar sebelah atas adalah 5px.
  2. Jarak setelah border dengan bagian luar sebelah kanan adalah 6px.
  3. Jarak setelah border dengan bagian luar sebelah bawah adalah 7px.
  4. Jarak setelah border dengan bagian luar sebelah kiri adalah 8px.

Ukuran pada margin melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri. Selain itu, penulisan margin juga dapat dipisah menjadi satu per satu setiap bagian.

Untuk margin atas, kode HTMLnya adalah margin-top:5px.
Untuk margin kanan, kode HTMLnya adalah margin-right:5px.
Untuk margin bawah, kode HTMLnya adalah margin-bottom:5px.
Untuk margin kiri, kode HTMLnya adalah margin-left:5px.

Padding.

Padding merupakan jarak border dengan bagian dalamnya atau jarak komponen body dengan border.

Kode HTMLnya adalah sebagai berikut ;

padding:5px 6px 7px 8px;

Arti dari kode di atas yaitu ;
  1. Jarak setelah border dengan bagian dalam sebelah atas adalah 5px.
  2. Jarak setelah border dengan bagian dalam sebelah kanan adalah 6px.
  3. Jarak setelah border dengan bagian dalam sebelah bawah adalah 7px.
  4. Jarak setelah border dengan bagian dalam sebelah kiri adalah 8px.

Ukuran pada padding juga sama seperti margin dengan melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri. Selain itu, penulisan padding juga dapat dipisah menjadi satu per satu setiap bagian.

Untuk padding atas, kode HTMLnya adalah padding-top:5px.
Untuk padding kanan, kode HTMLnya adalah padding-right:5px.
Untuk padding bawah, kode HTMLnya adalah padding-bottom:5px.
Untuk padding kiri, kode HTMLnya adalah padding-left:5px.

Nah, sekarang sudah jelas bukan bahasan mengenai margin dan padding blog ini?
Kalau masih ada yang belum jelas dan merasa kesulitan silakan ditanyakan lewat kotak komentar ya kawan..
Mari kita saling berbagi pengetahuan!
Salam blogger!
Labels:

Comments

Post a Comment

Popular posts from this blog

Memberi Emoticon Pada Postingan Blogspot

Hallo kawan blogger semuanya.. Apa kabar hari ini? Baik-baik bukan? Yup, pada hari jum’at yang indah ini kita akan membahas pengetahuan bagaimana menampilkan emoticon pada postingan blogspot milik kita. Sebelumnya, ada yang sudah tahu? Kalau sudah, siapa tahu langkah ini berbeda dengan yang selama ini kalian lakukan. Lumayan bukan untuk menambah pengetahuan baru? Bagi yang belum tahu, dengan penambahan emoticon dalam postingan blog kita niscaya akan membuat lebih semarak dan interaktif dengan pembaca! Penasaran? Yuk, langsung saja kita lihat penjelasannya.. Langkah-langkah yang perlu untuk dilakukan yaitu; Log in ke akun blogger milik kita. Klik buat entri untuk mulai membuat postingan baru. Nah, saat kita menulis dan ingin memasukan emoticon, masukan saja kode emoticon yang sesuai dengan keinginan kita pada bagian edit HTMLnya. <img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif"> <img src="http://photos1.blogger.com/blogger/7678/802/1600/b...
Post a Comment
Read more

Situs URL Expander

Situs URL Expander – Situs URL expander memiliki peran penting dalam rangka menjaga keamanan aksesibilitas kita sebagai pengguna internet ketika ingin mengunjungi sebuah halaman blog atau situs tertentu. Hal ini dikarenakan situs yang menyediakan layanan URL expander akan memberikan informasi kepada kita mengenai URL yang sebenarnya dari sebuah URL yang disingkat menggunakan layanan dari situs penyingkat URL . Jika kita hendak bepergian ke sebuah tempat, tentu kita harus tahu banyak hal mengenai tempat tersebut. Setidaknya, kita mengetahui informasi yang jelas, lengkap, dan terpercaya dari tempat yang akan kita kunjungi. Manfaatnya yaitu kita akan diberikan jaminan rasa aman jika tempat yang kita kunjungi tersebut tidak akan membahayakan keselamatan kita. Selain itu, kita juga berpotensi untuk mendapatkan kepuasan lebih dengan mengeksplorasi dan mendayagunakan informasi yang kita miliki dari tempat kunjungan tersebut. Hal ini merupakan sebuah analogi yang dapat kita terapkan ketika ki...
Post a Comment
Read more

Widget Total Posts dan Total Comments

Kadang baik kita sebagai pemilik blog maupun pengunjung blog kita ingin mengetahui berapa banyak postingan yang sudah dipublikasikan dan total komentar untuk semua postingan tersebut. Sebagai pemilik blog, kita tentu ingin menampilkan seberapa banyak postingan yang sudah kita publikasikan dan seberapa banyak komentar yang sudah kita dapatkan. Karena, semakin banyak kita mendapatkan keduanya maka akan semakin menunjukan eksistensi blog kita. Sebagai pengunjung blog, kita juga akan mendapatkan semacam suggesti jika semakin baik dalam arti semakin banyak jumlah postingan dan jumlah komentar untuk semua postingan dalam sebuah blog, maka kita dapat menyimpulkan jika blog yang sedang kita kunjungi tersebut adalah blog yang eksis dan berkualitas. Memang tidak ada standar baku yang menentukan batas berapa total posts dan total comments sebuah blog agar blog tersebut dinyatakan bagus, atau dengan melihat perbandingan di antara keduanya. Karena semua ini sifatnya hanya suggesti dan pelengkap. B...
Post a Comment
Read more