17/04/2016

CSS Width dan Height - Menentukan Lebar dan Tinggi Elemen HTML

17/04/2016

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