di css juga ada yang namanya margin seperti yang ada di microsoft word, dan sekarang kita akan mencoba dan memhami tentang apa itu margin di css, apa fungsi margin di css, dan bagaimana caranya kita memakai margin di css,tapi sebelum kita memulainya izinkan saya terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillah atas segala nikmat yang telah Allah berikan kepada diri ini, dan salah satu nikmat itu ialah menulis dan berbagi
dalam tulisan ini dengan kalian semua. dan mudah-mudah an dengan adanya tulisan ini saya bukan termasuk orang yang menyia-nyiakan
nikmat Allah yang telah di berikan kepada diri ini.
pada kesempatan kali ini kita akan mencoba mengenal tentan apa yang namanya property margin. karena property margin ini sangat sering
sekali di pakai dalam css. margin itu kalau menurut saya adalah batas luar tepian garis selektor. jadi batas itu berarti ada batas
kiri,kanan,atas dan bawah. maka begitupun juga dengan margin. margin itu ada margin-left (batas kiri), margin-right (batas kanan),
margin-top (batas atas), margin-bottom (batas bawah). dan untuk dalam percobaan kita kali ini, nanti yang tidak akan terlihat ada
pengaruh atau perubahannya yaitu margin-right dan margin-bottom, karena nanti kedua margin tersebut akan berpengaruh ketika posisi
selektor berada pada kanan atau selektor lebih dari satu selektor.
1. oke untuk menghemat tulisan maka kita langsung saja membuat file notepad++ atau bagi yang sudah mengikuti dari tulisan yang kemaren
maka cukup menduplikat biar data tidak hilsang, kemudian buka file dari tulisan kemaren. bagi yang baru mengikuti tulisan ini
silahkan ketik atau copy paste kode pada css seperti berikut kawan
#main{
border:1px solid blue;
min-width:150px;
width:100%;
background:#edfa1d ;
margin-left:150px;
}
dan untuk kode file html nya seperti di bawah ini kawan
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
</p>
</div>
</body>
</html>
maka jika penulisan kita benar dan tepat maka akan menghasilkan seperti berikut
2. dari hasil diatas kita bisa lihat perubahan pada file html kita yaitu selektor main berpindah agak masuk ke kanan, karena kita
kasih margin-left pada kode diatas. jadi margin-left pada kode diatas itu artinya ialah batas luar tepian garis selektor di sebelah
kiri pada 150px, atau dalam artian selektor akan agak masuk ke kanan se jauh 150px. dan kemudian sekarang kita tambahin margin-top
pada kode css kita seperti kode berikut ini
#main{border:1px solid blue;min-width:150px;width:100%;background:#edfa1d ;margin-left:150px;margin-top:150px;}
dan dari kode diatas akan didapatkan hasil seperti berikut
maka dari hasil diatas kita bisa lihat bahwa selektor main berubah posisi menjadi agak masuk kebawah. jadi margin-top pada kode
diatas itu artinya ialah batas luar tepian garis selektor di sebelah atas pada 150px,atau dalam artian selektor akan agak masuk
ke bawah sejauh 150px.
untuk margin-right dan margin-bottom nanti kita bisa lihat pengaruh atau perubahannya di next tulisan ya. karena kalau pada tulisan
ini maka tidak akan nampak perubahan nya. untuk margin ini bisa kita singkat, biar menghemat ketikan, dan juga baris pada notepad.
untuk cara penulisannya seperti berikut
margin: margin-top margin-right margin-bottom margin-left;
jika diterapkan pada kode maka akan menjadi seperti ini
#main{
border:1px solid blue;
min-width:150px;
width:100%;
background:#edfa1d ;
margin:150px 0px 0px 150px;
}
dan dari kode diatas ini menghasilkan sama dengan hasil pada gambar diatas. dan jika nilai semua margin atau batas sama semua, maka
kita bisa menulisnya dengan cukup satu nilai saja seperti contoh berikut.
#main{
border:1px solid blue;
min-width:150px;
width:100%;
background:#edfa1d ;
margin:150px;
}
3. jadi dengan penjelasan tulisan diatas sekarang kita tambahin pada kode css sehingga kode cssnya seperti berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:100%;
background:#edfa1d ;
margin:0px;
}
dan dari kode diatas maka akan didapatkan seperti berikut.
untuk tulisan margin ini cukup sekian dulu karena sepengetahuan saya seperti tulisan ini, jika ada yang lain tentang margin, kalian
bisa cari referensi lain. dan mudah-mudahan tulisan ini bisa bermanfaat untuk kita semua. Aamiiin.
dan kita lanjut di next tulisan kawan.
Salam Sobat semua
#css #margin #top #left #right #bottom #html #free #share #berbagi #gratis #web #website #websites
Komentar
Posting Komentar