Mengatur jarak tiap komponen dengan padding dan margin di CSS
Tutorial selanjutnya kita akan mengatur jarak tiap komponen dengan padding dan margin di CSS (cascading style sheets). Jarak sangat diperlukan untuk memperindah suatu halaman website. Untuk membuat jarak tiap komponen, kita hanya memerlukan suatu properti “padding” dan margin.
Padding digunakan untuk membuat jarak dari konten ke bagian luar dari tag. Sedangkan margin dibuat untuk mengatur jarak dari luar tag dengan tag yang lainnya. properti padding ataupun margin berfungsi dengan value yang dimasukan, valuenya dapat berupa pixel (px) ataupun persent (%), sesuai dengan kebutuhan.
Berikut ini merupakan penulisan properti jarak:
padding : …….(ukuran px / %)……
margin : ……..(ukuran px / %)……
jika ditulis pada tag style dengan selectornya body + ukuran 8px, maka akan tampak seperti berikut ini :
<style type=”text/css”>
Body {Padding : 8px;Margin : 8px;}
</style>
Sebelum kita beranjak untuk merapkannya pada tag html, Saya akan menambahkan sedikit penjelasan perihal padding dan margin. bagaimana jika kita ingin jarak yang di ubah hanya bagian bawah saja, atau mungkin hanya ingin bagian kanan saja, maka kita hanya perlu menambahkan properti “– (area lokasi :atas / top , bawah / bottom, kanan / right, kiri / left)“ di depan margin atau padding.
Contohnya seperti properti berikut
Padding bagian atas : padding-top : …..ukuran…..Margin bagian kanan : margin-right : ….. ukuran ……
Secera otomatis properti tersebut hanya akan merubah element bagian itu saja. Oke, mari kita coba terapkan pada file HTML, Bagaimana properti padding dan margin bekerja. Terlebih dahulu, silahkan buka aplikasi aplikasi editornya (notepad dan sejenisnya), lalu ketikan kode seperti berikut :
<html>
<head>
<style type="text/css">
body {
border:2px solid black;
padding:20px;
margin:10px;
}
p {
border:2px solid orange;
padding:9px;
}
a {
border:2px solid red;
padding:5px 40px;
margin-left:40px;
}
</style>
</head>
<body>
<p>
pada suatu hari, saya pergi mencari cara agar bisa membuat website. <br/>kalau tidak salah ketika SMK saya tertarik dengan aplikasi WEB, dan akhirnya, jadiah suatu website yang sederhana.<br/>
namun semuanya tidak bisa bertahan lama, saya ingin sekali ada iklan tampil di website. akhirnya saya belajar tentan periklanan.<br/>
setelah itu saya menemukan cara, yaitu dengan google adsense, namun naas, website sederhana saya, dilarang. karena saat itu saya buat website perfileman. wkwkwk.<br/>
akhirnya, saya mencoba untuk daftar di blogger, dan tara, jadilah blog ini, yah blog ini.<br/><br/>
saya coba daftarkan google adsense, namun selalu di tolak, akhirnya putus asa, dan berhenti nge blog.<br/>
namun ketika saya kuliah, saya coba-coba nge blog ulang, dan daftarkan ke adsense, dan taraa.. masih di tolak juga.<br/>
Okeyh akhirnya berhenti. lalu saya bangkit lagi, dan pada akhirnya di terima sebagai publisher google adsense ini.<br/>
perlu waktu yang lama, mungkin bertahun-tahun, untuk bangkit. setelah itu saya membuat situs web kesehatan dengan nama +62 positif62.com, eh kepanjangan ini cerita.
</p>
<a href="#">ini adalah sebuah link</a>
</body>
</html>
Setelah itu simpan dengan nama jarak.html dan buka dengan browser, berikut ini merupakan tampilan awal sebelum ditambahkan properti padding dan margin.
Dan ini merupakan tampilan setelah ditambahkan padding dan margin.
Penjelasan kode desaign diatas.
- <style> dan </style> merupakan kode awal dan akhir, untuk mendesign tampilan website.
- Body / p / a merupakan selector, yang berffungsi untuk menentukan bahwa area tersebut yang akan di perindah.
- Border : merupakan property untuk membuat garis dalam suatu element.
- Margin : merupakan properti untuk membuat jarak dari komponen ke satu dengan kompenent lainnya.
- Padding : untuk membuat jarak dari luar ke dalam element.
Jika dilihat pada selector a, kita menemukan bahwa kita mmenggunakan padding dengan properti seperti berikut padding : 5px 40px; ini artinya bahwa kita membuat jarak 5px untuk atas dan bawah, lalu jarak 40px untuk kiri dan kanan. Cara ini juga dapat diterapkan untuk properti margin.
Penjelasan kode HTML
- <html> merupakan tag pembuka, dan harus ditutup dengan </html>
- <head> merupakan tag kepala, yang dapat dijadikan sebagai lokasi penyimpanan design kita, dan berbagai kode seperti <title>, <meta>, iklan, ataupun JavaScript
- <p> merupakan tag untuk membuat suatu paragraf
- <br/> digunakan untuk membuat garis baru
- <a> digunakan untuk membuat suatu link, diakhiri dengan tag </a>
Tutorial selesai… terimakasih telah berkunjung, sampai berjumpa di tulisan lainnya.
