Padding adalah suatu jarak atau space antara inti elemen / konten terhadap border elemen. di artikel ini akan mebahas lebih jauh tentang cara mengatur padding di CSS.
Porperties untuk mengatur padding menggunkan CSS
Berikut daftar properties untuk mengatur padding
| Properties | Keterangan |
| padding | mengatur seluruh sisi padding |
| padding-top | mengatur padding bagian atas |
| padding-right | mengatur padding bagian kanan |
| padding-bottom | mengatur padding bagian bawah |
| padding-left | mengatur padding bagian kiri |
Untuk mengisi value properties padding kita bisa menggunakan value satuan ukuran seperti px,em atau %. (Menganal satuan ukuran yang sering digunakan di CSS).
Jika masih bingung dengan properties pading kita bisa melihat contoh elemen tanpa menggunakan padding, berikut contohnya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>CSS : padding</title> <style type="text/css"> .box{ width: 200px; min-height: 80px; border-style: solid; } </style> </head> <body> <div class="box"> The CSS padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of an element. </div> </body> </html> |
kita lihat border dan tulisan sangat dekat, dengan properties paddinglah kita bisa mengatur jarak antara border dan tulisan. Berikut contoh program menggunakan properties padding.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>CSS : padding</title> <style type="text/css"> .box{ width: 200px; min-height: 80px; border-style: solid; padding: 10px; } </style> </head> <body> <div class="box"> The CSS padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of an element. </div> </body> </html> |
dari dua contoh program diatas, kita bisa membedakan mana yang menggunkan properties padding dan mana yang tidak menggunkan properties padding.
Baca juga :
“Fokuskan 90% waktu Anda pada solusi dan hanya 10% pada masalah.” -Anthony J. D’Angelo
