Setelah width, height, dan border, padding pun ialah bagian dari CSS Box Model. Di panduan belajar CSS di Source Code Program kali ini kita akan membahas apa yang dimaksud dengan padding dan fungsi padding di dalam CSS.
Pengertian Property Padding CSS
Padding yakni sebutan untuk spasi atau ruang diantara konten dan border. Gambar CSS Box Model berikut dapat menjelaskan dimana letak padding ini.
Seperti yang terlihat, padding berada diantara konten utama dengan border. Jadi, kenapa saya membahas border dulu sebelum padding? Ini karena untuk dapat melihat efek padding, kita mesti menggunakan border. Tanpa border, padding akan susah untuk dilihat.
Cara Penulisan property Padding CSS
Property padding dapat diisi dengan satuan panjang seperti pixel, persen, em, dll. Selaku contoh, untuk mendesain padding sebesar 10 pixel, saya dapat menggunakan kode berikut:
|
1 |
<div style=padding: 10px></div> |
Berikut contoh penggunaannya di di kode HTML dan CSS:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/>.tanpa-padding {<br/> border: 2px solid red;<br/>}<br/>.dengan-padding {<br/> border: 2px solid red;<br/> padding: 10px;<br/>}<br/></style><br/></head><br/><body><br/><p class=tanpa-padding><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi<br/> tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam<br/> accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat<br/>felis, sit amet ullamcorper elit vulputate in.<br/></p><br/><p class=dengan-padding><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi<br/> tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam<br/> accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat<br/> felis, sit amet ullamcorper elit vulputate in.<br/></p><br/></body><br/></html> |
Di paragraf pertama-tama, saya tak menggunakan padding. Dapat terlihat teks seolah-olah seketika menempel ke sisi border. Di paragraf kedua, saya menggunakan padding: 10px, efeknya, teks akan berjarak 10 pixel dari setiap sisi border.
CSS pun menyediakan property terpisah agar kita dapat mengatur padding di setiap sisi, yakni dengan property padding-top, padding-right, padding-bottom, dan padding-left. Berikut contohnya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/>p {<br/> border: 2px solid red;<br/> padding-top: 20px;<br/> padding-right: 5px;<br/> padding-bottom: 30px;<br/> padding-left: 0px;<br/>}<br/></style><br/></head><br/><body><br/><p><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi<br/> tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam<br/> accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat<br/> felis, sit amet ullamcorper elit vulputate in.<br/></p><br/></body><br/></html> |
Kini ini masing-masing sisi mempunyai nilai padding yang berbeda-beda, dimana untuk sisi atas 20 pixel, sisi kanan 5 pixel, sisi bawah 30 pixel, dan sisi kiri tanpa ada padding (0 pixel).
Penulisan Shorthand Notation Property Padding
Shorthand Notation yakni sebutan untuk penulisan singkat sebuah property CSS. Selaku contoh, ketika kita menulis padding: 10px, karenanya padding ini sebetulnya sama dengan:
|
1 |
padding-top: 10px;<br/>padding-right: 10px;<br/>padding-bottom: 10px;<br/>padding-left: 10px; |
Sekiranya kita menulis padding: 10px 5px, karenanya ini sama dengan:
|
1 |
padding-top: 10px;<br/>padding-right: 5px;<br/>padding-bottom: 10px;<br/>padding-left: 5px; |
Perhatikan bahwa nilai pertama-tama (10px) digunakan untuk sisi atas dan bawah, sedangkan nilai kedua (5px) digunakan untuk sisi kiri dan kanan.
Sekiranya property padding ditulis dengan 3 nilai, seperti padding: 10px 5px 3px, ini sama artinya dengan:
|
1 |
padding-top: 10px;<br/>padding-right: 5px;<br/>padding-bottom: 3px;<br/>padding-left: 5px; |
Sekiranya property padding ditulis dengan 4 nilai, seperti padding: 10px 5px 3px 1px, ini sama
artinya dengan:
|
1 |
padding-top: 10px;<br/>padding-right: 5px;<br/>padding-bottom: 3px;<br/>padding-left: 1px; |
Bagaimana cara menghafal urutan ini? Yang betul-betul gampang diingat yakni dengan mengikuti arah jaruh jam, yakni mulai dari atas, kanan, bawah dan kiri. Atau dapat pun dengan menggunakan kata “TRouBLe”, yang ialah singkatan dari Top, Right, Bottom, dan Left.
Konsep penulisan shorthand notation ini betul-betul urgen untuk dimengerti. Karena hampir setiap property CSS yang menggunakan bidang sisi seperti padding dan margin menggunakan aturan penulisan yang sama.
Lalu, apa itu margin? Akan kita bahas di panduan berikutnya: pengertian margin dan fungsi property margin dalam CSS.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
