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