CSS fungsi Property Padding serta valuenya

padding adalah satu dari beberapa property dalam css, sedangkan fungsi padding adalah pemberian jarak atau batas(bagian dalam) pada suatu tag/box/bidang html

Perubahan adalah kata lain untuk berkembang atau mau belajar. Dan, kita semua mampu melakukannya jika berkehendak. Prof Charles Handy

padding adalah satu dari beberapa property dalam css, sedangkan fungsi padding adalah pemberian jarak atau batas(bagian dalam) pada suatu tag/box/bidang html

Last Modif at July 10th, 2011

padding adalah satu dari beberapa property dalam css, sedangkan fungsi padding adalah pemberian jarak atau batas(bagian dalam) pada suatu tag/box/bidang html.

fungsi css padding menurut w3scholl adalah

  • mendefinisikan ruang antara pembatasan elemen dan isi elemen

fungsi css padding menurut buku yang saya baca adalah

  • pemberian jarak antara atau batas antara suatu objek dengan objek-objek yang berada di dalam objek tersebut

fungsi padding menurut saya adalah

  • pemberian jarak bagian dalam pada suatu tag html

terserah mau pilih mana, yang terpenting adalah kita sama-sama ngerti fungsi padding

property padding antara lain

berikut property padding;

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding(khusus shorthand)

sedangkan value dari padding adalah

value padding

  • angka(pangjang) dalam px(pixel)
  • %
  • em, in dan pt
  • yang paling sering saya gunakan hanya px dan %

contoh padding dalam inline style

berikut beberapa kode dan tampilan tag html menggunakan style padding, anggap yang berwarna hijau dan biru adalah padding

padding-top

padding-top fungsinya untuk memberikan jarak dalam bagian atas

contoh kode

<div style="background-color:lime;width:100px;clear:both;padding-top:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding-right

padding-top fungsinya untuk memberikan jarak dalam bagian kanan
contoh kode

<div style="background-color:lime;width:100px;clear:both;padding-right:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan!

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding-bottom

padding-top fungsinya untuk memberikan jarak dalam bagian bawah
contoh kode

<div style="background-color:lime;width:100px;clear:both;padding-bottom:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan!

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding-left

padding-top fungsinya untuk memberikan jarak dalam bagian kiri
contoh kode

<div style="background-color:lime;width:100px;clear:both;padding-left:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan!

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

kita bisa menulis beberapa padding tapi ngga boleh ada property yang sama didalam 1 tag, id maupun class

contoh kode

<div style="background-color:lime;width:100px;clear:both;padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

shorthand padding

shorthand adalah teknik penulisan style css secara singkat. property padding ini juga support dengan teknik shorthand. penulisan padding dengan shorthand contohnya seperti ini

padding:value;

jadi dalam teknik shorthand kita tidak lagi mengenal padding-right, padding-left, padding-bottom, padding-top karena property top, right, bottom dan left sudah diwakili dengan padding

adapaun aturanya, seperti ini

  • padding:value1;/*ini sama dengan padding-top:value1; padding-right:value1; padding-bottom:value1; padding-left:value1; memiliki nilai sama */
  • padding:value1 valaue2;/* ini sama dengan padding-top:value1; padding-bottom:value1, dan padding-right:value2; padding-left:value2; */
  • padding:value1 valaue2 valaue3;/* ini sama dengan padding-top:value1; padding-right:value2;padding-left:value2; padding-bottom:value3;*/
  • padding:value1 valaue2 valaue3 value4;/*ini sama dengan padding-top:value1; padding-right:value2; padding-bottom:value3;padding-left:value4;*/

dari pada bingung lihat contoh dibawah!

padding:value1;

misal kita mengisi value1=10px, maka sama dengan

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

contoh code

<div style="background-color:blue;width:100px;clear:both;padding:10px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding: value1 value2;

misal value1=10px dan value2=20px, maka sama dengan

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

contoh code

<div style="background-color:blue;width:100px;clear:both;padding:10px 20px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding: value1 value2 value3;

misal value1=10px, value2=20px dan value3=30px, maka sama dengan

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;

contoh code

<div style="background-color:blue;width:100px;clear:both;padding:10px 20px 30px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding: value1 value2 value3 value4;

misal value1=10px, value2=20px, value3=30px dan value4, maka sama dengan

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

contoh code

<div style="background-color:blue;width:100px;clear:both;padding:10px 20px 30px 40px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

padding dalam internal style

pada contoh diatas, kita mempraktekanya dalam inline style. untuk code penerapan dalam internal style, sebagai berikut

<html>
<head>
<title>padding css</title>
<style type="text/css">
p{margin:0;/**/padding:0;/**/background-color:red;/**/}
#misalpadding1{
padding-top:20px;/*pemberian padding/lapisan/jarak-dalam atas sebesar 20px*/
}
#misalpadding2{
padding-right:30px;/*pemberian padding/lapisan/jarak-dalam kanan sebesar 30px*/
}
#misalpadding3{
padding-bottom:40px;/*pemberian padding/lapisan/jarak-dalam bawah sebesar 40px*/
}
#misalpadding4{
padding-left:50px;/*pemberian padding/lapisan/jarak-dalam kiri sebesar 50px*/
}
#misalpadding5{
padding-top:20px;/*pemberian padding/lapisan/jarak-dalam atas sebesar 20px*/
padding-right:0;/*pemberian padding/lapisan/jarak-dalam kanan sebesar 0*/
padding-bottom:30px;/*pemberian padding/lapisan/jarak-dalam bawah sebesar 30px*/
padding-left:50px;/*pemberian padding/lapisan/jarak-dalam kiri sebesar 50px*/
}
#misalpadding6{
padding:20px;/*masing-masing diberi nilai 20px*/
}
#misalpadding7{
padding:20px 50px;/*atas bawah sebesar 20p,kiri kanan sebesar 50px*/
}
#misalpadding8{
padding:10px 50px 80px;/* atas 10px, kiri-kanan 50px, bawah 80px*/
}
#misalpadding9{
padding:20px 30px 40px 50px;/*atas 10px, kanan 20px, bawah 30px, kiri 50px, arah nilai sesuai putaran jarum jam, dimulai dari atas!*/
}
.anggapsebagaikotak{
clear:both;/**/
margin-bottom:40px;/**/
background-color:blue;/**/
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalpadding1">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding2">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding3">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding4">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding5">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding6">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding7">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding8">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
<div class="anggapsebagaikotak" id="misalpadding9">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.net-->
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama paddingcss.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • selamat belajar

khusus valuenya, saya lebih sering menggunakan px atau % sedangkan pt, em ngga pernah
semoga bermafaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

9 thoughts on “CSS fungsi Property Padding serta valuenya”

  1. kickymaulana says:

    wah, makasi ya mas udah buat tutorial nya dalam bahasa indonesia, dari tulisan ini saya jadi tau yang shorthand untuk ini value 1, value 2, dan value 3, dari hari itu saya bingung dengan shorthand yang menggunakan tiga value gini, sekarang jadi tau, makasi ya mas, oh iya saya berlangganan melalui email ya mas

  2. adir says:

    wah… thanks mas bro atas tutorialnya….

  3. Makasih dah sharing teori paddingnya, mas…bermanfaat banget buat saya yang newbie dan baru belajar css.
    Ijin bookmark dulu blognya dan salam kenal dari Direktori Penerjemah Indonesia

  4. Opik says:

    Terimakash :’)

  5. thanks.., artikelnya.., sangat membantu untuk memodifikasi blog saya.

  6. Deloras Poljak says:

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ,’

    Our favorite homepage
    <http://www.healthmedicinentral.com

  7. ahmad rofi says:

    mksih dah berbagi ilmu….smga ilmu kita menjadi berkah dan bermanfaat

  8. ahmad rofi' says:

    makasih sudah berbgi ilmu…..smga bermanfaaat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-