padding dan border css
Padding dan border adalah dua properti CSS yang digunakan untuk mengatur ruang di sekitar konten elemen dan menambahkan tepi visual pada elemen.
Padding:
Properti padding digunakan untuk menentukan ruang (jarak) di antara konten elemen dan batasnya. Padding dapat diterapkan pada keempat sisi (atas, kanan, bawah, kiri) elemen atau dapat diatur secara individual menggunakan properti padding-top, padding-right, padding-bottom, dan padding-left.
Contoh penggunaan padding:
css
Copy code
.box {
padding: 20px;
}
Pada contoh di atas, elemen dengan kelas .box akan memiliki padding 20 piksel di semua sisi (atas, kanan, bawah, kiri).
Border:
Properti border digunakan untuk menambahkan tepi visual pada elemen. Properti border membutuhkan tiga nilai: ketebalan tepi, jenis garis tepi, dan warna tepi. Anda juga dapat mengatur tepi pada sisi-sisi tertentu menggunakan properti border-top, border-right, border-bottom, dan border-left.
Contoh penggunaan border:
css
Copy code
.box {
border: 2px solid #000000;
}
Pada contoh di atas, elemen dengan kelas .box akan memiliki tepi berketebalan 2 piksel, berjenis garis solid (solid), dan berwarna hitam (#000000).
Anda juga dapat menggunakan properti border-radius untuk membulatkan sudut-sudut elemen dan menciptakan elemen dengan sudut-sudut melengkung.
Contoh penggunaan border-radius:
css
Copy code
.box {
border-radius: 10px;
}
Pada contoh di atas, elemen dengan kelas .box akan memiliki sudut-sudut melengkung dengan radius 10 piksel.
Padding dan border adalah dua properti yang umum digunakan dalam CSS untuk mengatur tata letak dan penampilan elemen. Dengan menggabungkan padding, border, dan properti CSS lainnya, Anda dapat menciptakan tampilan yang kaya dan fleksibel untuk elemen-elemen pada halaman web.
