Belajar css seputar padding

belajar css

Kegunaan padding

Padding pada CSS digunakan untuk memberikan ruang space disekitar elemen atau konten. Padding sendiri bisa diatur pada setiap sisi dengan property: padding-top, padding-right, padding-bottom dan padding-left, dan bisa juga untuk semua sisi sekaligus. Dalam web design padding mempunyai peranan penting dalam mengatur jarak antar konten.

Contoh:

Editor Online
  1. #kuning {
  2. background-color: yellow;
  3. }
  4. #merah {
  5. background-color: red;
  6. padding: 15px 40px;
  7. }
  8. #hijau {
  9. background-color: green;
  10. padding: 30px 15px;
  11. }

Padding individu

Anda bisa mengatur padding lebih spesifik atau mendetail dengan menggunakan istilah padding individu. Yang dimaksud dengan padding individu sendiri, Anda bisa mengatur jarak padding untuk setiap sisi elemen:

  • padding-top ( atas )
  • padding-right ( kanan )
  • padding-bottom ( bawah )
  • padding-left ( kiri )

Semua property padding dapat memiliki nilai berikut:

  • Length – ukuran padding ditentukan dalam satuan seperti px, pt, cm, dll.
  • % – menentukan padding sebagai persentase memungkinkannya untuk beradaptasi ketika ukuran layar berubah
  • Inherit – menetapkan bahwa padding harus diwarisi dari elemen induknya

Property padding mendukung nilai negatif

Contoh:

Editor Online
  1. #kuning {
  2. background-color: yellow;
  3. }
  4. #hijau {
  5. background-color: green;
  6. padding-top: 30px;
  7. padding-right: 40px;
  8. padding-bottom: 60px;
  9. padding-left: 80px;
  10. }

Padding shorthand

Dengan padding shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property padding dalam satu property tunggal. Untuk menggunakan padding shorthand Anda cukup menggunakan property padding. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan padding individu.

Contoh:

Editor Online
  1. #default {
  2. background-color: orange;
  3. }
  4. #merah {
  5. background-color: red;
  6. padding: 10px 20px 30px 40px;
  7. }
  8. #hijau {
  9. background-color: green;
  10. padding: 5px 10px 15px;
  11. }
  12. #biru {
  13. background-color: blue;
  14. padding: 15px 20px;
  15. }
  16. #kuning {
  17. background-color: yellow;
  18. padding: 30px;
  19. }

Jadi, inilah cara kerjanya:

Jika property padding memiliki empat nilai:

  • padding: 10px 20px 30px 40px;
    • padding atas 10px
    • padding kanan 20px
    • padding bawah 30px
    • padding kiri 40px

Jika property padding memiliki tiga nilai:

  • padding: 5px 10px 15px;
    • padding atas 5px
    • padding kanan dan kiri 10px
    • padding bawah 15px

Jika property padding memiliki dua nilai:

  • padding: 15px 20px;
    • padding atas dan bawah 15px
    • padding kanan dan kiri 20px

Jika property padding memiliki satu nilai:

  • padding: 30px
    • keempat sudut padding 30px

Daftar property padding

PropertyKegunaanya
paddingMengatur semua property padding dalam satu deklarasi
padding-topMengatur jarak padding bagian atas
padding-rightMengatur jarak padding bagian kanan
padding-bottomMengatur jarak padding bagian bawah
padding-leftMengatur jarak padding bagian kiri

Leave a Reply

Your email address will not be published. Required fields are marked *