Definisi Padding
Padding merupakan area kosong yang ada di antara elemen konten dalam situs web. Melalui padding, Anda dapat memisahkan satu elemen dari yang lain sehingga tata letak situs web menjadi lebih rapi dan informasi bisa dengan mudah diterima oleh pengunjung.
Padding dalam CSS sangat krusial, sebab memiliki dampak signifikan pada tampilan template yang dirancang. Berikut ini adalah contoh implementasi padding dalam CSS. Padding berbeda dari margin, meski keduanya berfungsi untuk mengatur area kosong di situs web.
Secara umum, margin berfokus pada pengaturan posisi dari sisi luar, sedangkan padding berperan dalam pengaturan posisi dari sisi dalam. Perbedaan lain terletak pada aspek warna. Margin biasanya tidak memiliki warna, sementara padding bisa menggunakan warna yang sesuai dengan latar belakang halaman.
Fungsi Padding
Secara umum, tujuan dari fungsi padding adalah untuk menyusun layout di situs web agar lebih teratur. Dengan penerapan padding, Anda bisa menambahkan ruang di keempat sisi pada halaman situs web. Ketika padding ditambahkan, hal ini tentunya akan memberikan tampilan situs web yang lebih terstruktur dan memberikan kenyamanan lebih bagi pengunjung saat menjelajahi situs Anda.
Sintaks Padding
Dalam pembuatan sintaks untuk padding, Anda memiliki dua opsi yaitu sintaks padding secara keseluruhan dan sintaks padding untuk setiap sisi sesuai kebutuhan. Untuk sintaks padding yang mencakup keseluruhan, Anda dapat menggunakan skrip berikut: padding: 20px; Skrip di atas berarti bahwa padding akan diterapkan di seluruh halaman dengan ukuran 20px. Jika Anda ingin menambahkan padding dengan nilai yang berbeda di setiap sisi, Anda dapat menggunakan sintaks berikut;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 60px;
Atau dapat juga dituliskan dengan sintaks berikut:
padding: 30px 40px 50px 60px;Dengan urutan top (atas), right (kanan), bottom (bawah), dan left (kiri).
Untuk ukuran dari padding, Anda dapat menggunakan px ataupun dalam persentase misal 10%, 20%, dan seterusnya.
Contoh Padding
Setelah mengetahui informasi dan fungsi terkait padding, pada artikel kali ini kami akan memberikan contoh sederhana pengaplikasian padding pada halaman website. Yang pertama adalah pengaplikasian dari sintaks padding secara keseluruhan. Berikut contoh sintaks yang kami gunakan:
<html> <head> <title>jurnal padding</title> <body> <b>ini adalah halaman yang dibuat dengan padding</b> <h1 style="border: #0FF; border-width: 3px; border-style: solid; padding: 20px; font-size: 14px;">ini adalah halaman untuk percobaan padding</h1> </body> </head> </html>
Berikut kami sertakan contoh sintaks untuk padding di masing-masing sisi:
<html> <head> <title>jurnal padding</title> <body> <b>ini adalah halaman yang dibuat dengan padding</b> <h1 style="border: #0FF; border-width: 3px; border-style: solid; padding: 30px 40px 50px 60px;; font-size: 14px;">ini adalah halaman untuk percobaan padding</h1> </body> </head> </html>
Dan nantinya akan menampilkan sesuai dengan gambar. Bagaimana, cukup mudah bukan untuk menambahkan padding pada website Anda. Demikian artikel tentang apa itu padding beserta sintaks hingga contohnya. Semoga dengan ini, tampilan website Anda akan semakin menarik dan meningkatkan kunjungan pada website Anda. Semoga bermanfaat.