Dalam dunia bogging istilah seperti margin, padding, border sering kita jumpai dalam penguraian kode HTML dimana ini berfungsi dalam pengaturan letak teks pada blog seperti Header, Sidebar, jarak antara tulisan dengan kolom widget sehingga kita bisa mengatur jarak teks/objek seperti apa yang kita inginkan
1. Margin
Merupakan jarak antara element/konten, Margin merupakan ruang diantara element dimana memberikan jarak antar element. terdiri dari dua ruang vertikal dan dua ruang horizontal yang menjadikan jarak antar element .
Supaya lebih mudah kita lihat gambar dibawah ini untuk memvisualkan pengertian margin
 |
Margin merupakan jarak keluar dari suatu objek, apabila margin hanya 0 px maka element satu dengan yang lainnya saling berhimpitan
Contoh penulisan margin dalam CSS/kode HTML
#Element { margin: 15 px; }
Hal ini berarti bahwa setiap element memiliki margin yang sama yaitu 15 px
#Element { margin: 15 px 20px;}
Berarti bahwa element memiliki
margin-top, margin bottom 15 px ( Jarak space atas dan bawah )
margin-left, margin-right 20 px ( Jarak space kanan dan kiri )
#Element { margin: 15 px 10 px 20 px 5 px }
Berarti bahwa element memiliki margin-top 15 px , margin-right 10 px, margin-bottom 20 px, margin-left 5 px
Atau anda bisa menuliskan secara lengkap supaya lebih memudahkan untuk mengingat
#Element { margin-top: 15 px; margin-right: 10 px; margin-bottom: 20 px; margin-left 5 px; }
2. Padding
Merupakan jarak space antara objek/Tulisan dengan element, jarak space antara isi konten yang diatur dalam area konten/element biasanya berupa objek/tulisan
Seperti yang terlihat dalam gambar berikut
Contoh penulisan padding dalam CSS/Kode HTML sama persis seperti margin
3. Border
Merupakan garis sebagai pemisah antara dua objek, sehingga tampak jelas element/konten suatu blog.
Dalam CSS/HTML Border memiliki beberapa pilihan untuk digunakan seperti :
Border-style
Border-width
Border-color
Border-individual
Border-style
Jenis atau gaya dari garis tepi, dalam CSS/HTML Border-style terdiri dari :
| {border-style:none} | Border tanpa garis tepi |
{border-style:solid}
| Border berupa garis tepi yang lurus |
{border-style:dashed}
| Border berupa garis tepi yang putus-putus |
{border-style:dotted}
| Border berupa garis tepi seperti titik |
{border-style:double}
| Border berupa dua garis tepi |
{border-style:groove}
| Border berupa garis tepi yang beralur 3D |
{border-style:ridge}
| Border berupa garis tepi yang bergerigi 3D |
{border-style:inset}
| Border berupa garis tepi yang masuk ke dalam 3D |
{border-style:outset}
| Border berupa garis tepi yang masuk ke luar 3D |
Border-width
Lebar garis tepi, untuk menentukan lebar/ketebalan biasanya menggunakan satuan pixel
sebagai contoh kita ingin membuat border dengan bentuk dotted dengan ketebalan 8 pixel maka kode HTMLnya sebagai berikut
{ border-style:dotted ; border-width: 8 px; }
Border-color
Warna garis tepi, kita bisa memilih berbagai warna sesuai kode HTML
Untuk melihat kode warna HTML anda bisa lihat di Kode Warna HTML lengkap.
sebagai contoh kita akan membuat border dengan bentuk outset dengan ketebalan 10 px dan berwarna merah maka akan seperti ini
{ border-style: outset; border-width: 10 px; border-color: #FF0000; }
Jadi dapat disimpulkan penggabungan ketiga element tersebut dapat membentuk suatu kotak yang dapat digambarkan seperti di bawah ini
Sekian penjelasan dari saya tentang Pengertian Kode Margin, Padding, Border .
Semoga bisa bermanfaat untuk kita semua sehingga bisa memotivasi kita untuk lebih dalam belajar blog
Post a Comment