Showing posts with label CSS Box Model. Show all posts
Showing posts with label CSS Box Model. Show all posts

17/04/2016

CSS Margin & Padding - Menentukan Jarak Elemen

no-image
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).

CSS Width dan Height - Menentukan Lebar dan Tinggi Elemen HTML

Setelah kita mengetahui istilah box model pada pembahasan lalu dan sebelum kita beralih ke sesi atirubut CSS Box model terkait lebar dan tinggi elemen (width dan height),kita akan berkanalan terlebih dahulu dengan 2 jenis elemen HTML yaitu elemen tingkat blok (block level) dan elemen tingkat inline (inline level) untuk membantu kita memahami lebih jauh bagaimana elemen2 HTML akan ditampilkan pada halaman layar secara horizontal.
CSS Width dan Height
Penting untuk kita ketahui bahwa ada perbedaan sifat yang mendasar tentang 2 jenis elemen tersebut, yaitu:
  1. elemen tingkat blok akan menempati area layar secara penuh, terlepas dari banyak atau sedikitnya isi (konten) elemen yang ada. Jika ada elemen lain yang datang setelahnya maka elemen tersebut akan ditampilan pada baris baru. Contoh elemen jenis ini adalah tag HTML <p>. Sebagai gambaran, di bawah ini saya akan menampilkan dokumen HTML menggunakan tag <p> dengan warna latar belakang untuk mengetahui bagaimana elemen tingkat blok mengisi ruang secara penuh di atas halaman

  2. Sementara elemen tingkat inline hanya mengambil ruang sesuai dengan banyak atau sedikitnya konten elemen. Jika ada elemen lain yang datang setelahnya maka elemen tersebut akan ditampilkan pada area di sebelahnya. Contoh elemen jenis ini adalah tag HTML <span>. Sebagai gambaran, di bawah ini saya akan menampilkan dokumen HTML menggunakan tag <span> dengan warna latar belakang untuk mengetahui bagaimana elemen tingkat inline mengisi ruang di atas halaman sesuai dengan konten elemen
Pelajari selengkapnya tentang :: Inline dan Block Level
Merubah Nilai Dasar Elemen Tingkat Inline dan Block dengan CSS Inilah mungkin yang menjadi alasan mengapa kita harus mengenal terlebih dahulu tentang 2 jenis elemen HTML; Elemen Tingkat Inline dan elemen tingkat Block, dimana ukuran lebar dan tinggi jenis elemen tingkat inline bersifat relatif terhadap isi atau konten elemen itu sendiri, sementara ukuran lebar dan tinggi elemen tingkat block memiliki nilai dasar yang tetap yaitu sesuai dengan lebar layar. Penting untuk diketahui bahwa properti CSS Width dan Height hanya bisa diterapkan untuk jenis elemen tingkat block saja dan tidak bisa diterapkan untuk jenis elemen tingkat inline. Namun, ada solusi lain untuk menentukan ukuran lebar dan tinggi terhadap jenis elemen tingkat inline yaitu merubah sifat dasar jenis elemen tingkat inline menjadi (memiliki sifat seperti) jenis elemen tingkat block dengan properti CSS display, contoh

Sintak CSS

span {
      display: block;
      width: 100px;
      height: 100px;
      background: yellow;
}
Ada tiga nilai dari properti CSS display yaitu: inline, block, dan inline-block. Pelajari selengkapnya tentang Properti :: CSS Display

Menentukan Lebar Elemen dengan CSS Width dan Height

Properti CSS Width berfungsi untuk menentukan lebar area konten dari elemen, sementara properti CSS Height berfungsi untuk menentukan tinggi area elemen (tidak termasuk padding, margin, border dan properti lain). Lihat CSS box model. Nilai Properti CSS Width dan Height
  • auto
  • lenght
  • inherit
  1. auto
    • Ini adalah nilai default untuk ukuran lebar dan tinggi area konten dari elemen. Dengan menerapkan nilai auto, terutama jenis elemen tingkat block, elemen akan otomatis menempati ruang secara horizontal selebar 100% meskipun kita mentapkan nilai margin, padding, dan lain-lain.
  2. lenght
    • Menentukan lebar dan tinggi dengan jenis ukuran lenght baik unit absolut maupun unit relative, lihat selengkapnya di tatutan berikut :: CSS Lenght. Nilai panjang negatif tidak berlaku untuk properti CSS widht.
  3. inherit
    • Nilai inherit mengambil nilai yang ditentukan pada induk elemen.
Sintaks CSS Width dan Height

Contoh Sintak CSS Width dan Height

width: auto;
width: 300px;
width: 50%;
width: inherit;

height: auto;
height: 300px;
height: 50%;
height: inherit;
Contoh Penerapan Sintaks CSS Width dan Height

10/04/2016

CSS Box Model

Penggunaan istilah Box Model (sebagaimana yang sering digunakan di berbagai pembelajaran CSS dan HTML) menunjukkan bahwa setiap elemen HTML didefinisikan sebagai elemen yang membentuk model kotak persegi panjang (terlepas dari bentuk yang disajikan), dan model kotak berlaku untuk semua elemen HTML (dan XHTML). Oleh karena itu, "Box Model" adalah spesifikasi yang mendefinisikan bagaimana sebuah kotak dan atributnya berhubungan satu sama lain. Dalam contoh yang paling sederhana, gambar berikut akan menjelaskan apa yang disebut box model.
box-model
Setiap elemen akan ditampilkan sebagai kotak persegi panjang, dan ada beberapa sifat yang menentukan ukuran kotak itu, seperti: lebar kotak (width); tinggi kotak (height); jarak antara batas kotak dengan isi kotak (padding); jarak antara batas kotak dengan elemen di luar kotak (margin; dan lain sebagainya.

Sampai di sini, penting untuk kita ketahui bahwa contoh kotak elemen pada gambar di atas hanya bersifat ilustratif belaka. Garis tepi yang saya gambarkan hanya berfungsi untuk menandai area kotak elemen beserta atributnya. Dan di bawah ini saya sertakan contoh nyata dari dokumen HTML beserta atribut CSS pembentuk Box Model. Klik tab "preview" untuk melihat demo.

Pada contoh di atas, kita akan fokus pada kotak berwarna kuning sebagai elemen yang menjadi contoh box model. Kotak kuning tersebut saya buat dengan tag HTML <p> dan saya membungkusnya dengan kotak biru yang saya buat dengan tag HTML <div>. Di sini kita melihat bahwa sebuah kotak elemen bersama atributnya (width, height, margin, dan padding) saling berkaitan dalam menentukan ukuran sebuah elemen, dalam kasus ini saya menggunakan jenis satuan ukuran lenght, yaitu pixel / px (pelajari lebih lanjut pada tautan berikut: satuan ukuran lenght). Jika diakumulasikan maka contoh kotak elemen pada gambar di atas (kotak kuning) memiliki ukuran total 200px untuk lebar elemen dan 150px untuk tinggi elemen dengan asumsi sebagai berikut:
  1. Lebar Kotak
    • width(lebar elemen) : 100px
    • padding kanan : 20px
    • padding kiri : 20px
    • margin kanan: 30px
    • margin kiri : 30px
    • Total ukuran lebar : 100px + 20px + 20px + 30px + 30px = 200px
  2. Tinggi Kotak
    • height(tinggi elemen) : 50px
    • padding atas : 20px
    • padding bawah: 20px
    • margin atas: 30px
    • margin bawah: 30px
    • Total ukuran tinggi: 50px + 20px + 20px + 30px + 30px = 150px

Mengenal Lebih Jauh Atribut CSS Box Model

Sebagian kita mungkin masih belum benar-benar memahamai apa dan bagaimana atribut CSS Box Model bekerja. Sebab, untuk menentukan ukuran sebenarnya dari kotak elemen kita perlu memperhitungkan lebar kotak elemen, jarak antara batas kotak elemen dengan isi kotak (konten), dan jarak antara batas kotak elemen dengan area luar kotak elemen.
Sejauh ini banyak sifat-sifat penentu ukuran kotak elemen seringkali menguras perhatian kita. Untuk memperjelas hal tersebut, mari kita mengulas satu persatu sifat-sifat kotak elemen yang juga menjadi atribut CSS Box Model pada tautan di bawah ini.