17/04/2016

CSS Margin & Padding - Menentukan Jarak Elemen

17/04/2016

Ketika mengatur layout / tata letak halaman web, ada baiknya kita mempertimbangkan ruang kosong pada elemen sebagai jarak antara perbatasan elemen dengan elemen lain atau dengan area di luar elemen(margin) dan jarak antara perbatasan elemen dengan isi elemen itu sendiri (padding).

CSS Margin mengacu pada jarak perbatasan elemen dengan area di luar elemen, sementara CSS padding mengacu pada jarak perbatasan elemen dengan isi dalam elemen itu sendiri. Sebagai gambaran, jika kita menginginkan elmen HTML mengisi seluruh ruang layar atau halaman secara horizontal maka kita harus mempertimbangkan ukuran lebar layar. Sebutlah layar tersebut memiliki ukuran lebar 500 pixel, maka untuk mendapatkan ukuran yang tepat adalah dengan melihat jumlah total antara ukuran elemen, nilai margin, dan nilai padding secara horizontal (sisi kanan dan kiri) sehingga jumlah total menjadi 500 pixel. Perhatikan contoh berikut
p {
   width: 450px;
   margin: 10px;
   padding: 15px;
   }
Pada contoh di atas, saya menggunakan selektor dari tag HTML <p> dengan ukuran lebar 450 pixel dan ditambah dengan 10 pixel untuk margin kanan, 10 pixel untuk margin kiri, 15 pixel untuk padding kanan, dan 15 pixel untuk padding kiri. Jika dijumlah 450 + 10 + 10 + 15 + 15 = 500, nilai 500 ini sesuai dengan contoh ukuran lebar layar yang telah kita sebutkan di awal. Nilai Properti CSS Margin dan Padding
  • length
  • auto (margin)
  • inherit
  1. length
    • Menentukan jarak perbatasan elemen dengan jenis ukuran lenght baik unit absolut maupun unit relative, lihat selengkapnya di tatutan berikut :: CSS Lenght. Nilai panjang negatif berlaku untuk properti CSS margin namun tidak berlaku untuk CSS Padding.
  2. auto (khusus untuk CSS Margin)
    • Menerapkan nilai auto pada CSS Margin akan menempatkan elemen berpusat di titik tengah dari halaman layar secara horizontal.
  3. inherit
    • Nilai inherit mengambil nilai yang ditentukan pada induk elemen.
Sintaks CSS Margin dan Padding Terdapat empat sifat dalam penulisan sintaks CSS Margin dan Padding
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

Sintak CSS Margin dan Padding

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

padding-top: 10px;
padding-right: 10px; 
padding-bottom: 10px;  
padding-left: 10px; 
Namun ada cara lain yang lebih efesien dalam penulisan sintaks CSS Margin dan Padding. Setidaknya adan empat model penulisan Nilai CSS Margin dan Padding yang lebih efesien. Terlepas dari apapun istilahnya, untuk membedakan antara satu model dengan model lainya saya menyebutnya dengan model satu nilai, dua nilai, tiga nilai, dan empat nilai. Berikut ini adalah contoh penulisan CSS Margin yang juga berlaku untuk CSS Padding dalam penulisannya.
  1. Model Satu Nilai
    • Contoh : margin: 10px
      Contoh model penulisan satu nilai tersebut didefinisikan sebagai
      margin atas 10px
      margin kanan 10px
      margin bawah 10px
      margin kiri 10px
  2. Model Dua Nilai
    • Contoh : margin: 10px 15px
      Contoh model penulisan dua nilai tersebut didefinisikan sebagai
      margin atas dan bawah 10px
      margin kanan dan kiri 15px
  3. Model Tiga Nilai
    • Contoh : margin: 10px 15px 20px
      Contoh model penulisan tiga nilai tersebut didefinisikan sebagai
      margin atas 10px
      margin kanan dan kiri 15px
      margin bawah 20px
  4. Model Empat Nilai
    • Contoh : margin: 10px 15px 20px 10px
      Contoh model penulisan empat nilai tersebut didefinisikan sebagai
      margin-atas 10px
      margin-kanan 15px
      margin-bawah 20px
      margin-kiri 10px
Contoh Penerapan Sintak CSS Margin dan Padding Saya memilih elemen HTML <p> sebagai target CSS Margin dengan warna latar kuning dan saya membungkusnya dengan elemen <div> dengan warna latar biru untuk mengetahui efek margin yang ditampilkan. Pada elemen <div>, saya juga menyisipkan CSS Display: Overflow untuk alasan tertentu (anda bisa menemukan masalah tersebut pada tautan ini).