Padding CSS memungkinkan pembuat kode HTML untuk mengatur padding default atau ruang mati di luar elemen HTML. Manfaat melakukan ini adalah menyelamatkan pembuat kode dari pengulangan kode padding untuk setiap contoh elemen itu, dan lebih mudah menciptakan konsistensi pada halaman. Elemen HTML yang akan diisi dapat berupa beberapa hal, seperti paragraf, tabel, atau heading.
Untuk membuat padding di CSS, pertama Anda harus mengidentifikasi elemen HTML yang ingin Anda pad. Elemen yang ingin Anda pad ini dikenal sebagai pemilih. Kemudian, Anda ingin menentukan nilai padding yang sesuai. Ada lima jenis properti padding yang berbeda di CSS — satu untuk keempat sisi elemen sekaligus, dan empat lainnya untuk setiap sisi elemen (misalnya, sisi kiri, sisi kanan, sisi atas atau sisi bawah ). Properti yang memungkinkan programmer untuk menentukan nilai untuk keempat sisi elemen HTML sekaligus disebut properti steno.
Bahasa pengkodean yang digunakan untuk menentukan satu deklarasi padding CSS hanyalah kata “padding.” Setelah label itu, adalah “nilai” yang relevan dari padding, atau, informasi tentang jumlah ruang yang diinginkan, biasanya diwakili oleh piksel atau persentase. Padding dan nilai ditulis di dalam kurung kurawal atau kurung kurawal (yaitu, “{” dan “}”). Mendahului semua itu adalah elemen HTML yang akan diisi (misalnya, “p” untuk paragraf atau “H2” untuk header level 2).
Dalam hal bagaimana nilai direpresentasikan, nilai dapat direpresentasikan dalam piksel (misalnya, 1px atau 5px), titik (misalnya, 1pt atau 5pt) atau inci (misalnya, 1in atau 5in), atau sentimeter (misalnya, 1cm atau 5cm) . Nilai juga dapat dideklarasikan sebagai persentase dari elemen HTML yang sedang ditata. Jika nilainya 50%, misalnya, padding akan sama dengan setengah ukuran elemen.
Contoh berikut, adalah kode HTML untuk mengisi elemen HTML dengan cara nilai yang tercermin dalam persentase dan panjang, masing-masing. Jika hanya satu nilai yang ditetapkan, maka browser web akan menetapkan padding ini ke keempat sisi elemen HTML.
bantalan: 10%;
padding: 100px;
Menambahkan lebih banyak nilai ke jenis deklarasi padding di atas akan menyebabkan browser web menafsirkannya dengan cara tertentu. Jika dua nilai ditetapkan, yang pertama akan sesuai dengan atas dan bawah, sedangkan yang kedua sesuai dengan kiri dan kanan. Tiga nilai akan menyebabkan yang pertama merujuk ke atas, yang kedua ke sisi kiri dan kanan, dan yang ketiga ke bagian bawah elemen HTML. Menetapkan maksimum empat nilai menyebabkan nilai pertama, kedua, ketiga, dan keempat sesuai dengan bagian atas, kanan, bawah, dan kiri elemen HTML, dalam urutan itu. Jika lebih dari satu nilai diberikan, nilai tersebut harus dipisahkan dengan spasi dan diakhiri dengan titik koma, misalnya:
bantalan:10px 20px 10px 20px;
Padding dalam CSS dapat dilakukan satu sisi pada satu waktu juga. Dalam hal ini, ada empat properti padding lagi yang tersedia. Ini adalah padding-top, padding-right, padding-bottom, dan padding-kiri. Untuk membuat padding dalam CSS dengan cara yang lebih tepat ini, Anda harus memberi label pada properti dengan sintaks yang sama dengan deklarasi singkatan seperti di atas. Masing-masing properti padding ini hanya membutuhkan satu nilai baik panjang atau persentase. Sebagai contoh:
padding-top: 10px;
padding-kanan:20px;
padding-bottom: 10px;
padding-left: 20px;
Kode berikut membuat halaman web, mendeklarasikan properti padding di antara tag gaya, dan kemudian menggunakannya dalam elemen paragraf yang ditentukan oleh tag p. Teks antara /* dan */ adalah catatan untuk menjelaskan jenis padding yang digunakan dan tidak akan disertakan dalam kode padding CSS.
Teks ini memiliki padding yang sama di setiap sisinya. Padding di setiap sisi adalah 10px.
Teks ini memiliki padding atas dan bawah 50px dan padding kiri dan kanan 30px.
Teks ini memiliki padding atas 10px, padding kanan 20px, padding bawah 10px, dan padding kiri 20px.
Dalam contoh di atas, “example1,” dll., adalah nama yang diberikan ke kelas, yang kemudian dirujuk dalam paragraf. Periode antara tag p dan nama kelas di awal kode menunjukkan deklarasi kelas yang ditugaskan ke paragraf. Perhatikan tanda kurung kurawal setelah deklarasi kelas yang melampirkan penetapan nilai properti padding.
Meskipun ini mungkin tampak seperti banyak pekerjaan, ini jauh lebih sedikit padat karya daripada menentukan padding untuk setiap paragraf individu. Anda dapat mendeklarasikan satu properti padding untuk elemen yang diinginkan, yang dalam contoh di atas adalah tag p, lalu mereferensikan kelas saat Anda menggunakan elemen di antara tag badan halaman. Jika hanya satu jenis padding yang diperlukan untuk semua paragraf, Anda tidak perlu menggunakan kelas sama sekali. Cukup gunakan kode berikut di antara tag gaya, lalu kode paragraf tanpa menentukan kelas apa pun. Kode ini akan berada di antara tag tubuh alih-alih kode dalam contoh di atas.
p {padding:10px 20px 10px 20px;}
Padding CSS yang akan dibuat ini akan memengaruhi semua paragraf meskipun tidak ada kelas yang ditentukan.