TUTORIAL CSS PART 8 : MEMAHAMI KONSEP PADDING PADA CSS - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Friday, May 6, 2016

TUTORIAL CSS PART 8 : MEMAHAMI KONSEP PADDING PADA CSS



bewoksatukosong.com - Halo balik lagi dengan om bewok, gile gile gile om bewok hari ini rutin sekali nulisnya, tepuk tangan buat om bewok. Kali ini om bewok bakal ngejelasin mengenai padding, nah biar teman - teman tau perbedan dari margin dan padding adalah sama - sama untuk box,

Tapi memang kalau margin dia ber-urusan untuk di luar box atau luar kotak, tapi kalau  padding untuk ngurusin di dalam box atau dalam kotak.

Bingungkan? Nah biar ga bingung om bewok bakal kasih gambar nya dulu deh.



Kalau di lihat dari gambarnya, padding yang di kotak tersebut berwarna kuning ya. jadi dia untuk mengubah ukuran di dalam content


<!DOCTYPE html>
<html>
<head>
 <title>Konsep Padding ala Om Bewok</title>
 <style type="text/css">
  .box {
   height: 90px;
   max-width: 10%;
   background: blue;
   margin: 5%;
   color: white;
  }
 </style>
</head>
<body>
 <div class="box">Box ke Satu</div>
 <div class="box">Box Ke dua</div>
</body>
</html>


Gambar 1. Tanpa padding, tulisan dempet dengan kotak

Lihat tulisan yang berada di dalam kotak, sangat berdempetan di kotak atas, Untuk menghindari dempetan tersebut, kita perlu padding agar teks dan kotak berjauhan, tapi jangan jauh - jauh ya nanti kangen#Yaelah.

So, om bewok akan menambahkan padding. Lihat kodinganya dibawah ya.


<!DOCTYPE html>
<html>
<head>
 <title>Konsep Padding ala Om Bewok</title>
 <style type="text/css">
  .box {
   height: 90px;
   max-width: 10%;
   background: blue;
   margin: 5%;
   color: white;
   padding: 1%;
  }
 </style>
</head>
<body>
 <div class="box">Box ke Satu</div>
 <div class="box">Box Ke dua</div>
</body>
</html>
Maka hasilnya seperti dibawah ini 

Gambar 2. Dengan padding, tulisanya tidak terlalu dempet dengan kotak

Ketika kamu menambahkan padding, secara otomatis ukuran box-nya jadi ikutan berubah, solusinya agar ukuran kotak tersebut seperti sama sebelumnya, kamu harus mengurangi ukuran height-nya. 

Misalnya kamu pengen height = 100px, Agar kotaknya tetap berukuran 100px ketika padding di masukan, kamu harus mengurangin height-nya jadinya 
height : 80px
padding : 20px 
Sehingga ukuran kotak tersebut menjadi 100px, caranya height + padding artinya adalah 80px + 20px = 100px.

Oh iya kalau kamu ingin mengubah padding atas ya kamu tinggal ketik
padding-top, begitupun yang lainya.

Itu saja dari om bewok, kalau ada yang mau bertanya bisa komentar dibawah sini. Terima kasih buat teman - teman sudah Belajar CSS Part 7 : Memahami Konsep Padding Pada CSS

No comments:

Post a Comment