bewoksatukosong.com | Haloooo Teman - Teman, kembali lagi dengan saya, ya dengan saya yaitu om bewok, kali ini om bewok mau curcol ah, curcol mengenai margin loh ya bukan masalah yang lain.
Masih banyak orang yang gatau perbedaan margin dan padding, om bewok punya teman yang kurang tau perbedaan itu tapi bisa bikin web . well, ga bisa di salahin juga sih, yang namanya teknologi dalam website ga bisa di bendung lagi sih, sekarang bikin pake dreamweaver juga bisa tinggal drag and drop, dan masih banyak aplikasi yang sangat memudahkan kita untuk membuat website.
Om bewok berharap belajar dari dasar dulu ya, biar nanti mulai dari hal - hal yamg kecil ngerti, well ga kemungkinan ketika kamu sudah kerja,punya project harus dengan cepat di selesaikan, bos kamu ga peduli mau pake teknologi yang penting jadi, ya memang kebanyakan gitu kecuali memang bos kamu basic nya developer juga,pasti ngerti kok. udah ah curcol nya
Om bewok berharap belajar dari dasar dulu ya, biar nanti mulai dari hal - hal yamg kecil ngerti, well ga kemungkinan ketika kamu sudah kerja,punya project harus dengan cepat di selesaikan, bos kamu ga peduli mau pake teknologi yang penting jadi, ya memang kebanyakan gitu kecuali memang bos kamu basic nya developer juga,pasti ngerti kok. udah ah curcol nya
Anyway hari om bewok bakal jelasin Mengenai Konsep Pada Margin sebenernya gampang kok inti nya : ada dua kotak nih ya, nah biar kotak itu ada jarak pake margin. udah gitu aja, nah om bewok punya gambar dari google konsep nya, maaf ya om bewok ga bisa gambar (males). hehe
 |
| Sumber : http://helplogger.blogspot.co.id/2014/03/the-difference-between-padding-and-margin.html |
Nah kalau kita lihat di gambar, margin itu yang berwarna abu - abu ya.
Oke lanjut saja ke contoh latihan nya, oh iya kalian kalau mau bener - bener bisa kalian harus experiment sendiri ya, biar bener - bener makin paham sama yang om bewok jelasin
Pertama kita bikin index.html nya dulu ya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Margin ala Om Bewok</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">Box Ke Satu</div>
<div class="box">Box Ke dua</div>
</body>
</html>
Oke setelah itu css nya juga ya,
.box {
max-width: 10%;
height:100px;
background: red;
margin: 5%;
color: white;
border:2px solid black;
}
Maka Hasil nya seperti ini
 |
| Gambar 1.1 Kotak terpisah karena meggunakan margin |
Well jangan pusing ya, ini baru dasar kok dan masih mudah. oke om bewok bakal jelasin satu - satu ya.
<body>
<div class="box">Box Ke Satu</div>
<div class="box">Box Ke dua</div>
</body>
Ini bermaksud kita membuat div, div itu adalah sebuah bagian yang mana ada bagian box ke satu dan box kedua. nah masing - masing box ini kita samain class nya, kalau ini kalian harus belajar html dulu ya, mengenai id dan class, ada kok tutorial nya yang di tulis oleh om adji mampir ya gan dan sis :)).
Tapi sedikit flashback sebentar ya, id itu unik jadi ga boleh sama, dan kalau class boleh sama. kebetulan kita pake nama yang sama jadi nya kita buat pake class.
Oke Lanjut ke css-nya. copass duluuu kalau ga copasss ga uuuuuuuu#kalau nonton rvlog raditya dika pasti tau :))
.box {
max-width: 10%;
height:100px;
background: red;
margin: 5%;
color: white;
border:2px solid black;
}
Oke sudah saya copas semuanya, mari kita bedah satu persatu sepeti dokter bedah #ketawaJahat
max-width apa itu ?
-max : maksimal
-width : lebar
Jadi Lebar Maksimal
lah gitu doang ? iyalah
Seketika ada anak muda kepada saya
anak muda : om bewok mau nanya dong ?
om bewok : katakan saja anak muda, saya lagi kepingin jawab
anak muda : kenapa pake % bukan nya px, bedanya apa sih om ?
om bewok : #berfikirKeras. jadi gini nak, memang px waktu dulu, tapi px ini tidak bisa membuat responsive website, alhasil untuk bisa membuat responsive menggunakan %.
anak muda : om bewok nanya lagi dong, kenapa max-width bukan nya bisa width doang ?
om bewok : #otakNgebul, jadi gini ya anak muda yang budiman, kalau max-width ketika tulis 100% tidak benar - benar penuh sampe ujung. bingung ?sini om kasih contoh.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Margin ala Om Bewok</title>
<style>
.box {
max-width: 100%;
height:100px;
background: red;
margin: 5%;
color: white;
border:2px solid black;
}
</style>
</head>
<body>
<div class="box">Box Ke Satu</div>
<div class="box">Box Ke dua</div>
</body>
</html>
Maka Hasilnya ketika di kecilin
 |
| Gambar 1,2 Tidak sampai ujung browser |
Tapi Kalau hanya menggunaakan width tidak pake max nya maka akan seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Margin ala Om Bewok</title>
<style>
.box {
width: 100%;
height:100px;
background: red;
margin: 5%;
color: white;
border:2px solid black;
}
</style>
</head>
<body>
<div class="box">Box Ke Satu</div>
<div class="box">Box Ke dua</div>
</body>
</html>
 |
| Gambar 1,3 |
Lihat ujung nya itu jadi ada sisanya kan kalau menggunakan width, dan ketika di tampilkan di mobile atau dekstop akan menjadi kurang baik.
height:100px;
background: red;
margin: 5%;
color: white;
border:2px solid black;
Om bewok langsung lanjutin selanjutnya ya
1.Height : tinggi
arti nya tinggi kotak tersebut adalah 100px. that's it hanya itu.
2.Kalau background ya kalian taulah warna belakang nya berwarna merah
3.Color itu warna huruf nya ya, kebetulan om kasih warna putih
4.Untuk border adalah garis kotak nya yang berwarna hitam dengan ukuran 2px, semakin besar px nya maka ketebalan nya makin jadi, seperti alis gambar yang di buat cewe- cewe jaman sekarang.. ALIS CETAR.
5. Margin 5% arti nya kotak dari atas, kanan, bawah, kiri yaitu 5% untuk keduanya loh, karena nama class nya kita buat sama, otomatis dua - dua nya yang worth it.
anak muda : kalau saya cuman pengen margin atas nya aja gimana om ? bisakah ?
om bewok : bisa dong
kamu tinggal tulis
.box {
width: 100%;
height:100px;
background: red;
margin-top: 5%;
color: white;
border:2px solid black;
}
anak muda : om kalau saya pengenya atas, kanan, bawah, kiri nya margin beda semua gmn om?
om bewok : #haduh nih orang nanya mulu, ga selesai selesai deh nih artikel, tapi karena om bewok baik akan om kasih tau.
.box {
max-width: 10%;
height:100px;
background: red;
margin-top: 5%;
margin-right:8%;
margin-bottom:20%;
margin-left:2%;
color: white;
border:2px solid black;
}
GOT IT ?
top : atas
right: kanan
bottom:bawah
left:kiri
anak muda : Om bisa ga di singkat, kepanjangan ah males nulis nya
om bewok : #asahGolok. Bisa kok nak, ini di sebut css-shorthand, nih margin yang tadi singkat ya jadi seperti ini.
.box {
width: 100%;
height:100px;
background: red;
margin: 5% 8% 12% 13%;
color: white;
border:2px solid black;
}
Inget ya itungan nya kalau pake singkatan dari Atas, Kanan, Bawah, Kiri.
anak muda : om bisa ga kalau aku ubah atas bawah nya sama dan kiri kanan nya sama ?
Om Bewok : BISA. jadi seperti ini ya
.box {
width: 100%;
height:100px;
background: red;
margin: 5% 8%;
color: white;
border:2px solid black;
}
Inget ya kalau jadi 2 gini otomatis 5% untuk atas sama bawah DAN untuk 8% yaitu yang kiri dan yang kanan
anak muda : om bisa ga kalau atas bawah kiri aku isi yg kanan aku kosongin ?
om bewok : bisa kok, caranya kamu kasih 0 aja. nih om kasih contoh terakhir loh ya awas aja kalau masih nanya lagi. om bewok mau mandi soalnya :p
.box {
width: 100%;
height:100px;
background: red;
margin: 5% 0% 10% 2%;
color: white;
border:2px solid black;
}
Inget !!!!
Jadi yang 5% atas, 0 kanan, 10% bawah, 2% kiri.
anak muda : makasih ya om, sekarang sudah ngerti #ngeloyor pergi
om bewok : #bengong.
Itu dia Penjelasan Mengenai Margin Pada CSS, semoga bisa membantu, kalau masih ada yang bingung kamu bisa tanya di comment diatas, eh di bawah, maaf udah ga focus, kebanyakan jawab pertanyaan si anak muda itu. Oke selanjutnya kita akan mempelajari padding pada CSS, siap - siap ya.
No comments:
Post a Comment