Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding )

Sudah 4 materi kita pelajari, sebelumnya
Bab IV : Belajar CSS bagian 3 ( Link | hover )
kita pelajari, saatnya masuk ke materi baru : Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding )

Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding )
Kalian akan mempelajari :
1. Membuat atau mengatur margin dengan CSS
2. Membuat atau mendesain border dengan CSS
3. Membuat atau mengatur padding dengan CSS

Tahap Sebelumnya | Bab IV : Belajar CSS bagian 3 ( Link | hover ) |

Sebelum memulai materi ini saya awali terlebih dahulu penjelasan margin. border dan padding. Yang sudah mengerti silahkan skip saja :

Margin

Border

Padding

Konten / Isi 

Margin : Area terluar border ( konten )
Border : garis yang memisahkan margin dengan padding
Padding : Area dalam pemisah border dengan konten / isi
Konten / isi : tempat dimana sesuatu kamu letakan ( teks, gambar dll )

   1. Margin
     Seperti yang telah saya jelaskan di atas, padding area terluar border atau juga bisa yang lainnya gambar, tulisan juga dapat di buat margin. biasanya di gunakan untuk memisahkan border dengan konten lain agar tidak menyatu. Rumus untuk membuat margin yaitu :

selector {margin-letak:besarnya;}

# Keterangan
letak : bisa kamu tentukan mana yang akan kamu buat margin apakah itu top (atas), bottom (bawah), left (kiri) atau right (kanan)
besarnya : yaitu besar jarak margin (lebar) ditentukan dengan px


misal seperti ini jadinya :
.post-body img{margin-bottom:10px;}
menjelaskan bahwa jarak pemisah bagian bawah gambar post 10px

Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :
selector {margin: top right bottom left;}
Contohnya : 
p {margin: 10px 10px 10px 10px;}
Namun jika ingin membuat margin hanya bottom dan top saja tetapi ingin metode singkat ini, contohnya :
p {margin: 10px 0 10px 0;} 

  
   2. Border
     Border sangat penting untuk mendesain web / blog karena dapat memperindah web / blog, ada macam-macam jenis border ada solid, dashed, dotted, inset, outset, ridge, groove dan double, bentuknya yaitu :

solid

dashed

dotted

inset

outset

ridge

groove

double

Sekarang lihat caranya :

1. Rumus Border
Selector {border-style:bentuknya;}
# Ket : bentuknya : kamu atur sesuai keinginan kodenya yaitu yang diatas ( solid, dashed ... )
Contoh : a img {border-style:solid}


2.Kode CSS dibawah dapat digunakan sebagai pelengkap border
   a. menentukan lebar border :
Selector {border-style:bentuknya;border-width:besarnya;} 
# Ket : besarnya : kamu ganti sesuai keinginan kamu ( px dll )
Contoh : a img {border-style:dashed;border-width:400px;}


 b. menentukan warna border :Selector {border-style:bentuknya;border-color:warnanya;}
# Ket : warnanya; : kamu ganti sesuai keinginan kamu ( HEX, RGB, color name )
Contoh : a img {border-style:inline;border-color:(0,0,255;}


3. Membuat border individual :
Selector {border-pilihan:bentuknya;}
# Ket : pilihan : mana yang akan kamu buat border top ( atas ), bottom ( bawah ), left ( kiri ) atau right ( kanan ).
            bentuknya : (solid, dashed ... )
Contoh :
a img {border-top:dashed;border-right:inline;border-bottom:outline;border-left:double;}

Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :
selector {border: besarnya bentuknya warnanya;}
Contohnya : 
a img {border: 5px groove #ff0000;}

  
   3.Padding
      Bisa dikatakan caranya persis dengan metode buat / atur margin :

selector {padding-letak:besarnya;}

# Keterangan
letak : bisa kamu tentukan mana yang akan kamu buat padding apakah itu top (atas), bottom (bawah), left (kiri) atau right (kanan)
besarnya : yaitu besar jarak margin (lebar) ditentukan dengan px


misal seperti ini jadinya :
.post-title a{padding-left:5px;}
menjelaskan bahwa jarak bagian kiri link judul post 10px

Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :
selector {padding: top right bottom left;}
Contohnya : 
.post-title a{padding: 15px 10px 15px 20px;}
Namun jika ingin membuat margin hanya left saja tetapi ingin metode singkat ini, contohnya :
.post-title a{padding: 0 0 0 20px;} 

  

| Bab VI  : Belajar CSS bagian 5 ( List | Tabel ) | Tahap Berikutnya

Farkryzer