Dimensi elemen pada CSS

Apa yang dimaksud Dimensi elemen pada CSS ?. Setiap elemen memiliki dimensi berdasarkan total perhitungan padding, margin, border, dan ukuran originalnya, sehingga di dapatlah total dari panjang x lebar elemen tersebut. Untuk lebih memahami penjelasan di atas, perhatikan gambar di bawah :

dimensi elemen pada css

Perhitungan Width dan Height si elemen adalah asli milik elemen sendiri, tidak termasuk padding, margin dan border. Anda dapat mengatur width dan height setiap elemen dengan bebas.

Di bawah ini adalah hasil dari kode sumber di atas :

dimensi width dan height elemen pada css

Dalam pengaturan Width dan Height, anda dapat menyetel ukuran maksimal dan juga minimal dari kedua pengaturan tersebut, menggunakan property :

  1. Max-height, menyetel ukuran maksimal dari height (lebar) elemen. Contoh max-height : 160px, maka jika ukuran height lebih kecil dari 160px, ukuran elemen akan berubah, namun jika lebih dari 160px, ukuran tidak akan berubah.
  2. Min – height, menyetel ukuran minimal dari height (lebar) elemen. Jadi seandainya ukuran min-height: 30px, maka elemen hanya akan berubah jika anda menyeting ukuran height di atas 30px. Jika di bawah 30px, elemen tidak akan berubah.
  3. Max – width, menyetel ukuran maksimal width (Panjang) elemen. Jika ukuran max-width: 100px. Maka elemen hanya akan berubah apabila nilai width di bawah 100px.
  4. Min width, menyetel ukuran minimal width (Panjang) elemen. Jika ukuran min-width: 100px. Maka elemen hanya akna berubah apabila nilai width di atas 100px.

Berikut contoh kode sumbernya :

Dan di bawah ini adalah hasil dari kode sumber di atas :

mengatur dimensi elemen

Gambar di atas memiliki width 200px, max-width 220px, dan min-width 180px. Jika saya rubah width nya menjadi 250px, maka konten tidak akan mengikuti nilai perubahan pada width, karena nilainya lebih dari 220px, 220px adalah nilai yang telah di setting pada max-width. Maka ukurannya tidak akan menjadi 250px, namun menjadi 220px.

dimensi width pada elemen html

Tapi jika kalian hilangkan kode max-width: 220px; maka ukuran elemen akan mengikuti width.

apa itu dimensi elemen pada css

Bila pada min-width, berlaku kebalikannya. Karena nilai min-width di atas saya setting min-width: 180px; maka apabila anda rubah ukuran width-nya di bawah 180 (179 – 0), tidak akan merubah ukuran elemen. Tapi bila di atas 180, maka akan merubah ukuran elemen.

Bila anda perhatikan penjelasan di atas, urutan property yang akan dinilai paling utama adalah :

  1. Max-width dan min-width
  2. Width

Konsep ini juga berlaku pada max-height, min-height, dan height.


Demikian tutorial dari dimensi yang dimiliki elemen pada CSS. Silahkan kunjungi artikel lainnya seperti : Margin Border Padding Outline.

Leave a comment

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

One thought on “Dimensi elemen pada CSS”

× Contact Us