Cara Mengatur Lebar dan Tinggi Elemen dengan CSS

Setiap elemen HTML memiliki bentuk persegi panjang secara default.

Dan setiap elemen tersebut memiliki karakteristik “box model” seperti yang sudah saya bahas pada tutorial sebelumnya tentang margin dan padding.

Box-model menggambarkan area yang terdapat dalam setiap elemen, yaitu: content area, padding area, border area, dan margin area.

Content area ada pada setiap elemen, sedangkan padding area, border area, dan margin area merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Dalam web desain, keberadaan box model ini bisa berpengaruh pada tata letak elemen block HTML.

Selain memiliki karakteristik box model yang sudah disebutkan di atas, elemen HTML juga bisa diatur lebar dan tingginya menggunakan property CSS width dan height.

Cara Mengatur Lebar dan Tinggi Elemen dengan Property CSS width dan height

Untuk mengatur lebar elemen HTML, kamu bisa menggunakan property CSS width.

Dan untuk mengatur tinggi elemen HTML, kamu bisa menggunakan property CSS height.

Perlu diingat! property width dan height tidak menyertakan lebar padding, border, dan margin.

Sehingga properti width dan height ini hanya mengatur lebar dan tinggi area di dalam padding, border, dan margin.

Nilai Property CSS width dan height

Property CSS width dan height memiliki nilai berikut:

• auto - Ini nilai default yang ditentukan oleh web browser
• length - menentukan lebar dan tinggi dengan satuan px, cm, em, rem, dll.
• % - menentukan lebar dan tinggi dalam persen.
• initial - menentukan lebar dan tinggi berdasarkan nilai defaultnya.
• inherit - menentukan lebar dan tinggi dengan mengikuti nilai elemen induk.

Sebagai contoh, saya akan membuat elemen box menggunakan tag <div class="box"></div dengan lebar 300px dan tinggi 200px.

Seperti ini style CSS-nya:

.box {
    width: 300px;
    height: 200px;
}

Dan ini hasilnya:

Perhatikan contoh di atas! elemen box benar-benar memiliki lebar 300px dan tinggi 200px.

Sekarang saya akan memberikan padding atas 32px dan padding bawah 32px pada elemen box.

Seperti ini style CSS-nya:

.box {
    width: 300px;
    height: 200px;
    padding-top: 32px;
    padding-bottom: 32px;
}

Dan seperti ini hasil akhirnya:

Perhatikan lagi contoh di atas!

Lebar box tetap 300px karena tidak ada padding kanan dan kiri didalam elemen box.

Sedangkan tinggi box akan menjadi 264px.

Lalu kenapa tinggi box bisa berubah menjadi 264px?

Seperti yang sudah saya terangkan di atas tadi bahwa property width dan height tidak menyertakan lebar padding, border, dan margin.

Sehingga properti height pada elemen box hanya mengatur tinggi area di dalam padding elemen box.

Jadi nilai tinggi 264px didapat dari jumlah padding-top: 32px + height: 200px + padding-bottom: 32px.

Mengatur Box Model dengan Property CSS box-sizing

Dalam menentukan layout halaman website, kadang keberadaan “box model” akan menyebabkan kendala jika ingin menentukan lebar dan tinggi elemen dengan nilai yang tetap.

Misalnya seperti contoh di atas tadi.

Ketika kamu ingin menentukan tinggi elemen box dengan nilai 200px, tetapi hasil akhirnya malah menjadi 264px karena adanya padding top dan padding bottom pada elemen box.

Masalah ini bisa diatasi dengan cara menggunakan property CSS box-sizing: border-box pada elemen box.

Jadi seperti ini style CSS-nya:

.box {
    width: 300px;
    height: 200px;
    padding-top: 32px;
    padding-bottom: 32px;
    box-sizing: border-box;
}

Dan seperti ini hasilnya:

Sekarang perhatikan lagi contoh di atas!

Lebar box tetap 300px dan tingginya juga tetap 200px meskipun terdapat padding top dan padding bottom pada elemen.

Hal ini disebabkan karena nilai padding juga ikut dihitung sebagai tinggi elemen box.

Namun dampaknya tinggi content area akan berkurang dari 200px menjadi 136px.

Darimana nilai tinggi 136px pada content area ini didapatkan?

Nilai tinggi 136px pada content area didapatkan dari height: 200px - padding-top: 32px - padding-bottom: 32px.