Shorthand Notation Property Padding

MENGENAL PROPERTY SHORTHAND NATION PROPERTY PADDING

Shorthand Notation adalah istilah untuk cara menulis secara singkat sebuah property CSS.Ketika kita menulis padding : 10px, maka cara penulisan tersebut sama nilainya dengan cara penulisan seperti ini :

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

Artinya semua sisi (atas,kanan,bawah,kiri) memiliki nilai 10 pixel.

Cara penulisan singkat tersebut juga bisa divariasi lebih lanjut,misalnya jika kita menulis padding : 10px 5px,maka cara penulisan tersebut sama nilainya dengan cara penulisan seperti ini

padding-top: 10px;

padding-right: 5px;

padding-bottom: 10px;

padding-left: 5px;

Dengan begitu,kita dapat menyimpulkan bahwa nilai pertama pada cara penulisan singkat,yaitu 10px digunakan untuk mengatur padding sisi atas dan bawah,sedangkan nilai kedua,yaitu 5px digunakan untuk mengatur padding sisi kanan dan kiri.

Nah,sekarang kita mencoba untuk menuliskan padding dengan 3 nilai seperti ini :

padding: 10px 5px 3px;

Penulisan contoh di atas sama penulisannya dengan :

padding-top: 10px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

Dan apabila property padding ditulis dengan 4 nilai,seperti :

padding: 10px 5px 3px 2px;

Artinya penulisan ini sama dengan :

padding-top: 10px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 2px;

Kesimpulannya adalah jika kita menuliskan masing-masing nilai padding (4 nilai/sisi) maka urutannya adalah dari atas,kanan,bawah dan kiri (mengikuti arah jarum jam).

Konsep penulisan Shorthand Notation ini sering dipraktikkan untuk penulisan property dengan bidang sisi misalnya untuk property padding dan margin.

Sekian pembahasan mengenai Shorthand Notation pada property Padding.Semoga bermanfaat.Terima Kasih !