Belajar Kode CSS & Desain Blog: CSS Padding Properties

Padding adalah bagian yang tak terpisahkan yang sangat penting dalam desain web/blog. Posisi padding berada antara border dan content (jika menggunakan border). Memanfaatkan padding adalah salah satu cara untuk dapat memperoleh penataan desain yang rapi dan menarik, selain menjadi batas pemisah antara content dengan unsur lain dalam blog/web. Dalam perhitungan, padding termasuk bagian dari ukuran sebuah box, setelah content dan border. Jika dibuat dalam bentuk perhitungan akan seperti ini:

Menghitung ukuran box

mybox{
      width:200px;
      height:100px;
      border:10px solid grey;
      padding:10px 15px 5px 70px;
      margin:25px 10px;
}

Perhitungan ukuran box:

total width = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right
total width = 200px + 10px + 10px + 70px + 15px + 10px + 10px
total width = 325px
total height = height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom
total height = 100px + 10px + 10px + 10px + 5px + 25px + 25px
total height = 185px

Penulisan Padding Properties

Contoh kode	Bentuk baku	TOP	RIGHT	BOTTOM	LEFT	satuan
padding-top: 20px;	padding-top: A;	A	0	0	0	px, pt, em, %, etc
padding-right: 8px;	padding-right: B;	0	B	0	0	satuan yang paling sering digunakan = px
padding-bottom: 15px;	padding-bottom: C;	0	0	C	0
padding-left: 100px;	padding-left: D;	0	0	0	D
padding : 5px;	padding: A ;	A	A	A	A
padding: 10px 4px;	padding: A B ;	A	B	A	B
padding : 12px 0 8px;	padding: A B C ;	A	B	C	B
padding:60px 5px 5px 50px;	padding: A B C D ;	A	B	C	D

Untuk melihat fungsi padding dalam sebuah box serta sejauh mana fungsi padding ketika dipekerjakan bersama kode css lain, dalam demo telah disertakan 2 bua box. Box kedua akan memperlihatkan hubungan padding dan penggunaan "overflow". Untuk tetap mempelihatkan adanya padding top dan padding-bottom maka content harus dibungkus lagi dalam sebuah box tanpa margin, padding dan border serta overflow diletakkan di box ke-2 ini.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS Padding Properties</title>
<head>  
<style type="text/css">
html{background:#444;}
body{ 
   color:#000;
   font-family:Arial;
   font-size:14px;
   padding:0;
   margin:0 auto;
   background: url(https://lh3.googleusercontent.com/-F1cCRB0UBi4/UClKTzKqcQI/AAAAAAAAAFc/0PcCltLXyIs/tiger-01-400x500.jpg);
   background-size:100% auto;
   background-repeat:no-repeat;
   background-position:top center;
   background-attachment:fixed;   
}
div{
      text-align:justify;
      overflow:auto;
      background:lightyellow;
}
div{
      margin:40px auto;
      width:400px;
      height:200px;
      border:20px solid rgba(255,0,0,0.6);
      padding:19px 15px;
}
.box-dalam{
      margin:0;
      padding:0;
      width:100%;
      height:100%;
      border:none;
}
</style>

</head>
<body>

<div>
Ada hal aneh yang selalu terjadi dalam hidup. Hal yang tampaknya sederhana dan tak pernah menjadi bahan pemikiran atau bahkan perdebatan meski dibulan puasa sekalipun.
<br/><br/>
Hal yang aneh selalu terjadi ketika perut mulai terasa sangat lapar. Sakit..., perih dan sering terasa seperti diremas-remas dengan keras yang bahkan menimbukan sebuah erangan, rintihan atau bisa juga umpata.
<br/><br/>
Ada satu yang perlu kita ketahui sebelum membahas lapar yang menimbulkan rasa sakit atau kesakitan ini. Sakit akibat lapar sebenarnya hanya terjadi setelah manusia mulai mengenal bahan-bahan makanan yang mengandung bahan-bahan kimia bukan alami. Dimasa jaman purba sebelum dikenal makanan yang terinfeksi bahan kimia (seperti jaman Adam dan Hawa) rasa lapar bahkan menimbulkan kesukaan yang luar biasa hingga orang yang perutnya mulai keroncongan bahkan malahan bernyanyi-nyanyi dengan keras sambil menari. Mereka menikmati musik yang keluar dari perut sebagai keindahan dan kenikmatan yang merangsang syaraf "kesukaan". Tangan dan kaki secara reflek akan bergerak mengikuti musik perut tersebut. Hal yang pada saat ini tak mungkin terjadi karena pada era sekarang musik perut akan menghantam syaraf kegilaan Musik perut mendorong orang untuk mencari seonggok makanan  kemudian tangan nyelonong untuk mengambilnya serta menjejalkan ke mulut.... 
</div>

<div>
<div class="box-dalam">
Ada hal aneh yang selalu terjadi dalam hidup. Hal yang tampaknya sederhana dan tak pernah menjadi bahan pemikiran atau bahkan perdebatan meski dibulan puasa sekalipun.
<br/><br/>
Hal yang aneh selalu terjadi ketika perut mulai terasa sangat lapar. Sakit..., perih dan sering terasa seperti diremas-remas dengan keras yang bahkan menimbukan sebuah erangan, rintihan atau bisa juga umpata.
<br/><br/>
Ada satu yang perlu kita ketahui sebelum membahas lapar yang menimbulkan rasa sakit atau kesakitan ini. Sakit akibat lapar sebenarnya hanya terjadi setelah manusia mulai mengenal bahan-bahan makanan yang mengandung bahan-bahan kimia bukan alami. Dimasa jaman purba sebelum dikenal makanan yang terinfeksi bahan kimia (seperti jaman Adam dan Hawa) rasa lapar bahkan menimbulkan kesukaan yang luar biasa hingga orang yang perutnya mulai keroncongan bahkan malahan bernyanyi-nyanyi dengan keras sambil menari. Mereka menikmati musik yang keluar dari perut sebagai keindahan dan kenikmatan yang merangsang syaraf "kesukaan". Tangan dan kaki secara reflek akan bergerak mengikuti musik perut tersebut. Hal yang pada saat ini tak mungkin terjadi karena pada era sekarang musik perut akan menghantam syaraf kegilaan Musik perut mendorong orang untuk mencari seonggok makanan  kemudian tangan nyelonong untuk mengambilnya serta menjejalkan ke mulut.... 
</div>
</div>

</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Padding Properties

Menghitung ukuran box

Perhitungan ukuran box:

Penulisan Padding Properties

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.15.2012');

CSS Padding Properties

Menghitung ukuran box

Perhitungan ukuran box:

Penulisan Padding Properties

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e