2012-10-30

CSS >> Padding

Ironman 3 sudah hadir infonya. Temanku jadi galau melihat previewnya. Tetapi bagi saya yang terpenting adalah jalan cerita bukan teknologinya.
Iron man

Untuk menyingkat tulisan. Saya membuat sebelumnya tentang margin. Bila margin adalah batas dari sisi terluar tag, maka padding dihitung dari sisi terdalam. Keduanya bisa dibilang mirip, tetapi dalam penggunaannya tentu saja berbeda. Ada beberapa bentuk padding yaitu

  • Padding: 10px;
  • Padding: 10px 20px;
  • Padding: 10px 20px 30px 15px;
hasil di atas tentu saja berbeda, penjelasa panjang tentu bikin anda bosan.. Jadi mari kita coba. pada dasarnya padding itu kalau dibagi-bagi menjadi
  • padding-top
  • padding-left
  • padding-bottom
  • padding-right
anda bisa langsung menulis padding-top bila hanya butuh padding-top saja. Tetapi saya membiasakan diri mengetik padding lalu memberikan angkanya semua seperti no 3 (Padding: 10px 20px 30px 15px;)

Padding: 10px;
Padding: 10px 20px;
Padding: 10px 20px 30px 15px;
sudah terlihat perbedaannya? penjelasannya:
  • Padding: 10px;
    dari sisi terdalam 10px untuk semua sisi
  • Padding: 10px 20px;
    dari sisi terdalam 10px untuk atas dan bawah, 20px dari kanan dan kiri. Untuk kanan tidak terlihat jelas tentunya dalam contoh di atas.
  • Padding: 10px 20px 30px 15px;
    dari sisi terdalam 10px untuk sisi atas, 20 dari kiri, 30 dari bawah, dan 15 dari kanan.
Berikutnya kita akan mencoba meneruskannya ke "clip" .. css yang bisa kubilang agak unik

Tidak ada komentar: