Dalam dunia blog, terlebih saat kita akan mengkustomisasi template blog, kita pasti sering sekali menemui sebuah atribut yang bernama "Margin, Padding dan Border" yang kadang terletak di setiap elemen yang akan kita edit. Apalagi ketika kita ingin membuat tema blog dari nol, pasti dalam mengatur tata letak dan merapihkan tampilan tema dasar kita harus menggunakan atribut ini.
Untuk itu, pada kesempatan kali ini, sebagai pembelajaran buat saya khususnya agar lebih bisa memahami atribut tersebut, saya ingin mencoba memaparkannya melalui tulisan ini. Semoga kita bisa bersama - sama belajar di sini. Oh ya, buat sobat sekalian apabila nanti ada yang keliru dalam penyampaian saya, saya harap sobat sekalian berkenan untuk memberi koreksi melalui kolom komentar.
Sebelum kita mulai membahas mengenai "Memahami Margin, Padding dan Border", saya ingin menyampaikan metode saya dalam menyampaikan materi ini.
Agar mudah untuk memahami dan melihat perbedaan dalam setiap contoh yang saya sampaikan, maka setiap contoh yang saya sampaikan akan saya sajikan menggunakan media gambar, di mana gambar tersebut mewakili sebuah teks / isi / konten yang mendapatkan properti berupa "Margin, Padding atau Border". Adapun gambar yang akan sering sobat lihat dalam setiap contoh adalah seperti di bawah ini:
Sobat, alasan saya dalam menyampaikan contoh pada tutorial ini untuk menggunakan sebuah gambar adalah karena pada sebuah gambar itu lebih mudah bagi kita untuk melihat batas di setiap sisinya, baik atas, bawah, kanan ataupun kiri. Tidak seperti menggunakan sebuah teks atau tulisan yang akan membuat kita sulit untuk melihat sisi sebelah kanan, lebih - lebih apabila teks tersebut hanya terdiri dari beberapa kalimat saja dan bukan sebuah paragraf.
Oke, mari kita mulai pembahasan kita.
Margin.
Sobat, definisi pasti dari margin sebenarnya saya sendiri kurang begitu faham, tapi dari segi terjemahannya margin memiliki arti "batas", jadi bila dikaitkan dapat kita ambil kesimpulan bahwa pengertian margin adalah "area batas terluar" sebuah konten yang berfungsi untuk memisahkan (memberi jarak) area konten dari elemen lain pada sebuah halaman HTML.
Margin merupakan nilai sebuah properti style (css) dalam sebuah halaman HTML, cara penggunaan dan penerapannya bisa dengan cara:
- Inline (sebaris dengan tag HTML) contoh:
- Onpage (css yang diletakkan dalam tag <style> pada elemen <head> sebuah halaman HTML) Contoh:
- Outpage (penerapannya sama seperti Onpage, hanya saja di letakkan di luar halaman HTML)
<p style="margin: 7px">Isi / Main / Konten</p>
p {
margin: 7px;
}Ukuran satuan absolut antara lain:
- in = Inchi
- cm = Senti meter
- mm = Mili meter
- pt = Point (1pt = 0.139 inchi)
- pc = Pica (1pc = 12pt)
Sedangkan ukuran satuan relatif antara lain:
- px = Pixel (satu titik gambar yang paling kecil dari sebuah layar, tergantung dari resolusi layar)
- % = Persen
- em = Ukuran yang nilainya sama dengan ukuran font element induk
- ex = Ukurannya setara dengan 0,5em
Cara penulisan margin.
Setiap elemen HTML memiliki empat (4) sisi, yaitu sisi sebelah atas, kanan, bawah dan kiri. Dari setiap masing - masing sisi bisa kita beri margin yang berbeda ukurannya tergantung dari kebutuhan.
1. Margin dengan ukuran berbeda pada setiap sisinya.
Contoh:
- <p style="margin: 20px 30px 50px 40px;">Isi / Main / Konten</p>
Dari contoh di atas (ukuran dibaca searah jarum jam dari atas, kanan, bawah dan kiri) akan terlihat seperti di bawah ini:
- Keterangan:
- Garis titik - titik merah = Batas dari total lebar halaman HTML (elemen induk / elemen lain).
- Warna biru = Batas atas, kanan, kiri dan bawah sebuah konten.
- Warna putih = Lebar margin sesuai ukuran yang kita tulis pada style (warna putih sesuai background induknya).
p {
margin: 20px 30px 50px 40px;
}
Atau sama juga bila kita tulis dengan kode css dibawah ini:
p {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 40px;
}
2. Margin dengan ukuran yang sama pada setiap sisinya.
Apabila margin yang kita inginkan memiliki ukuran yang sama pada setiap sisinya, maka cukup tuliskan satu ukuran saja dan ukuran tersebut akan berlaku untuk semua sisi, baik atas, kanan, kiri ataupun bawah.
Contoh:
- <p style="margin: 20px">Isi / Main / Konten</p>
Untuk css:
p {
margin: 20px;
}
3. Margin dengan ukuran yang sama pada masing - masing 2 sisi.
Apabila kita menginginkan ukuran margin sama pada setiap 2 sisinya, yaitu atas = bawah dan kiri = kanan, sebagai contoh kita ingin margin atas dan bawah 40px sedangkan kiri dan kanan 30px, maka cara kita menulisnya akan seperti ini:
Contoh:
- <p style="margin: 40px 30px">Isi / Main / Konten</p>
Untuk css:
p {
margin: 30px 40px;
}
Keterangan: Ukuran yang pertama (30px) untuk mengatur margin atas dan bawah, sedangkan yang kedua (40px) untuk margin kiri dan kanan.
4. Penulisan Margin dengan 3 ukuran saja.
Apabila sobat menuliskan nilai ukuran margin dengan 3 poin saja seperti ini:
- <p style="margin: 10px 30px 50px">Isi / Main / Konten</p>
Atau bila dalam css akan seperti ini:
p {
margin: 10px 30px 50px;
}
Maka ukuran di atas akan terbaca 10px untuk sisi atas, 30px sisi kanan dan kiri sedangkan 50px sisi bawah. Dan akan terlihat seperti ini:
5. Menggunakan Margin untuk mengatur posisi konten agar berada tepat di tengah - tengah.
Properti margin juga berfungsi untuk mengatur posisi sebuah konten agar tepat berada di tengah - tengah area halaman. Jadi, apabila sobat ingin mengatur sebuah konten agar posisinya tepat di tengah - tengah sebuah halaman / area, maka sobat harus menggunakan properti margin ini, dan memberi nilai "0 auto" pada margin.
Contoh:
p {
width: 75%;
margin: 0 auto;
}Dan hasilnya posisi konten yang kita buat akan berada di tengah -tengah seperti gambar di bawah ini.
Padding.
Padding secara bahasa memiliki arti "lapisan". Sedangkan dalam istilah bahasa HTML padding adalah area yang berfungsi memberi "jarak dalam" pada sebuah elemen untuk melapisi isi / main / konten.
Padding juga tidak memiliki nilai warna akan tetapi warna pada padding dipengaruhi oleh warna background elemen yang dikandungnya (bukan induknya) tidak seperti margin yang warnanya sesuai dengan elemen induknya.
Adapun satuan ukuran, cara penerapan dan cara penulisan padding sama persis dengan margin. Jadi bisa sobat lihat kembali uraian margin di atas, dan ganti tulisan margin dengan padding untuk mengaplikasikannya.
Agar lebih jelas kita buat satu contoh penggunaan padding seperti dibawah ini:
Contoh:
- <p style="padding: 20px 30px 50px 40px; background: lime;">Isi / Main / Konten</p>
Untuk css seperti ini:
p {
padding: 20px 30px 50px 40px;
background: lime;
}
Atau sama juga bila kita tulis dengan kode css dibawah ini:
p {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 40px;
background: lime;
}
Dan akan terlihat seperti di bawah ini:
- Keterangan:
- Garis titik - titik merah = Batas dari total lebar halaman HTML (elemen induk / elemen lain).
- Warna biru = Batas atas, kanan, kiri dan bawah sebuah konten.
- Warna hijau = Lebar padding sesuai ukuran yang kita tulis pada style.
Pada contoh padding di atas (di dalam area garis titik - titik warna merah) tidak terdapat area warna putih karena memang tidak terdapat margin di dalamnya. Sekarang coba kita tambahkan nilai margin pada contoh di atas, maka css kita tulis seperti ini:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
}
Hasilnya akan terlihat seperti ini:
Oke, semoga bisa sobat pahami. Silahkan utak - atik sendiri agar lebih paham dan tinggalkan pesan lewat kolom komentar bila ada yang ingin didiskusikan.
Border atau Garis.
Border adalah satu properti dalam sebuah halaman HTML yang berfungsi untuk mengvisualkan batas pada elemen yang berupa sebuah garis, yang letaknya berada di antara margin dan padding (sisi dalam margin dan sisi luar padding).
Untuk menambahkan properti border atau garis pada sebuah tag HTML kita bisa menuliskan tiga (3) nilai sekaligus pada properti border tersebut, yaitu width, style dan color, untuk mengatur ukuran (lebar), bentuk dan warna garis. seperti: p {border: 4px solid red;}
Agar lebih jelasnya, mari kita terapkan pada sebuah contoh visual seperti penulisan css di bawah ini:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
border: 4px solid red;
}
Maka akan memberikan hasil tampilan seperti di bawah ini:
Semoga dari contoh visual di atas sudah bisa sobat pahami secara garis besar tentang maksud dari property border yang telah saya sampaikan
Dari contoh di atas dapat sobat lihat bahwa border memiliki tiga nilai, yaitu 3px (menunjukkan width / lebar garis - berlaku untuk keempat sisi), solid (menunjukkan style / bentuk garis) dan red (menunjukkan color / warna garis). Dan dari ketiga nilai tadi dapat kita pisahkan atau kita uraikan macam - macam properti border.
Macam - macam Property Border.
Ada beberapa macam properti border yang dapat kita gunakan dalam mengatur tampilan sebuah garis. Dan masing - masing property ini juga pastinya memiliki nilai dan fungsi yang berbeda. Di antara properti border yang akan saya sampaikan nanti adalah width, style, color dan radius.
Oke, mari kita bahas bersama tentang properti border.
1. Border Width.
Properti border pertama yang akan kita bahas adalah "width atau lebar". Properti ini berfungsi untuk mengatur ketebalan atau lebar garis. Dan secara default tanpa kita menuliskan kata "width" pada style (css) borowser akan tetap bisa menerjemahkan sebuah nilai 3px (seperti contoh di atas) sebagai nilai lebar garis.
Cara penulisan nilai lebar sebuah border sedikit berbeda dari penulisan margin dan padding apabila kita menginginkan lebar yang berbeda di setiap sisinya. Bila pada margin atau padding kita bisa langsung menuliskan " margin/padding: 20px 30px 50px 40px; " untuk keempat ukuran sisi yang berbeda, tetapi bila pada border kita harus merinci satu persatu setiap sisinya, kita tidak bisa menulis dengan kode seperti ini "border-width: 20px 30px 50px 40px" atau "border: 20px 30px 50px 40px" tetapi harus:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
border-top: 20px;
border-right: 30px;
border-bottom: 50px;
border-left: 40px;
border-style: solid;
border-color: red;
}
Dan hasilnya akan seperti ini:
2. Border Style.
Border style adalah properti border untuk mengatur bentuk garis pada elemen HTML sesuai style yang kita sukai.
Penulisan: <p style="border: 3px;border-color: blue; border-style: solid" > Isi </p>
Ada beberapa macam nilai border style yang bisa sobat gunakan, di antaranya:
1. Border Style Solid.
Bentuk garis tebal, jelas dan terlihat padat (solid).
2. Border Style Dotted.
Bentuk garis terlihat titik - titik (dotted).
3. Border Style Dashed
Bentuk garis terlihat putus - putus (dashed).
4. Border Style Double
Bentuk garis terlihat ganda (double).
5. Border Style Inset
Bentuk garis dengan efek warna (tergantung set warna) (inset).
6. Border Style Outset
Bentuk garis dengan efek warna (tergantung set warna) (outset).
7. Border Style Ridge
Bentuk garis dengan efek garis punggung (tergantung set warna) (ridge).
8. Border Style Groove
Bentuk garis dengan alur (tergantung set warna) (groove).
3. Border Color.
Untuk warna garis kita bisa menggunakan properti "border-color", adapun cara penulisannya telah saya sampaikan pada uraian yang di atas.
Ada banyak warna yang bisa sobat pilih untuk mempercantik tampilan web atau blog sobat, sedangkan untuk menulisnya, sobat bisa memasukkan nama warna yang sobat inginkan seperti "red, blue, lightgrey dll. (dalam bahasa inggris)" atau juga bisa dengan menuliskan kode hex seperti #ff0000 (merah), #0000ff (biru), #d3d3d3 (lightgrey) dll. Untuk menemukan nama atau kode warna yang sobat inginkan, silahkan sobat kunjungi halaman ini.
Berikut ini adalah contoh struktur HTML untuk mewarnai garis (border-color): <p style="border: 1px solid red"> Isi </p> atau
<p style="border: 1px solid; border-color: #000ff"> Isi </p>
Setelah uraian panjang lebar yang telah saya sampaikan di atas, kita bisa menggabungkan kode - kode yang telah saya sebutkan tadi menjadi sebuah style inline tag HTML seperti berikut ini:
- <p style="padding: 20px 30px 50px 40px; background: lime; margin: 20px; border-top: 3px solid red; border-right: 10px double grey; border-bottom: 4px dotted blue; border-left: 15px dashed yellow">Isi / Main / Konten</p>
Atau dalam bentuk css seperti ini:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
border-top: 3px solid red;
border-right: 10px double grey;
border-bottom: 4px dotted blue;
border-left: 15px dashed yellow;
}
Maka akan memberikan hasil tampilan seperti di bawah ini:
4. Border Radius.
Border Radius adalah sebuah properti border yang berfungsi untuk memberi efek melengkung pada setiap sudut garis.
Pada umumnya properti border yang di tambahkan sebagai style sebuah tag HTML akan memiliki bentuk standar yaitu siku ( 90o ) di keempat sudutnya, apabila sobat ingin mengubah bentuk standar tersebut, maka sobat bisa menambahkan properti border-radius untuk merubah semua sudutnya atau hanya salah satu sudutnya saja.
Agar tidak bertele - tele, mari kita praktekkan langsung.
Ini adalah bentuk standar sebuah border:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
border: 4px solid red;
}
Akan terlihat bentuk standar yaitu siku ( 90o ) di keempat sudutnya seperti terlihat di bawah ini:
Dan sekarang saya ingin merubah bentuk sudutnya dari siku menjadi melengkung, dan tinggal kita tambahkan "border-radius" pada stylenya seperti ini:
p {
padding: 20px 30px 50px 40px;
background: lime;
margin: 20px;
border: 4px solid red;
border-radius: 17px;
}
Sekarang sudutnya akan terlihat seperti di bawah ini:
Selain membuat sudut lengkung, dengan menggunakan properti border radius ini kita juga bisa membuat sebuah konten / media menjadi bentuk bulat.
Caranya: Konten / media yang ingin kita bentuk menjadi bulat harus berbentuk persegi empat (sama sisi) kemudian berikan nilai 100% pada properti border radius.
Contoh:
Contoh ini menunjukkan sebuah bentuk bulat.
Contoh ini menunjukkan sebuah bentuk bulat.
Contoh ini menunjukkan sebuah bentuk bulat.
Nilai (dalam css) yang saya gunakan untuk membuat contoh di atas adalah:p {
width:100px;
height:100px;
margin: 10px;
padding: 20px;
background: lime;
border:9px groove red;
border-radius: 100%;
}Ketiga contoh di atas hanya berbeda pada properti border, sedangkan pada contoh yang pertama saya tidak menggunakan properti border.
Selain untuk membuat bentuk bulat seperti contoh di atas, sobat juga bisa membuat bentuk - bentuk yang lain menggunakan properti border radius kemudian tinggal sesuaikan saja nilai pada setiap sudutnya.
Penulisan Nilai Border Radius
Letak penulisan nilai keempat sudut dari properti border radius hampir sama dengan penulisan nilai margin dan padding. Bila di urutkan dari sisi atas, kanan, bawah dan kiri pada margin dan padding, maka letak nilai sudut properti border radius adalah sebagai berikut:
- Atas = border-top-left-radius.
- Kanan = border-top-right-radius.
- Bawah = border-bottom-right-radius.
- Kiri = border-bottom-left-radius.
Untuk dapat lebih memahami, silahkan sobat perhatikan contoh - contoh di bawah ini:
Contoh Satu:
border-radius: 17px 0px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
border-radius: 17px 0px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
Contoh Dua:
border-radius: 0px 17px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
border-radius: 0px 17px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Tiga:
border-radius: 0px 17px 17px 0px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
border-radius: 0px 17px 17px 0px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
Contoh Empat:
border-radius: 17px 0px 0px 17px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
border-radius: 17px 0px 0px 17px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Lima:
border-radius: 0px 17px 0px 17px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
border-radius: 0px 17px 0px 17px;
Sama dengan:
border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Enam:
border-radius: 17px 0px 17px 0px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
border-radius: 17px 0px 17px 0px;
Sama dengan:
border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
Setelah panjang lebar materi ini saya sampaikan, sebagai latihan, silahkan sobat buat sendiri sebuah elemen HTML yang dapat menunjukkan hasil seperti contoh di bawah ini.
BENTUK BORDER RADIUS
Silahkan sharing melalui kolom komentar apabila sobat telah berhasil dalam latihan ini. Happy day to you all...
Sebagai penutup, semoga yang telah saya sampaikan bisa memberi manfaat kepada kita semua.
Share, like dan komentar dari sobat sangat memberi arti untuk blog ini. Semoga bermanfaat dan sukses selalu untuk kita semua. Aamiin...
