Mengatur Width dan Height Halaman HTML dengan CSS

Pada pembahasan ini, kamu dapat mengetahui cara mengatur lebar sekaligus tinggi pada halaman HTML kamu menggunakan CSS. Kamu juga dapat belajar mengenai Belajar Basic HTML dan Belajar Basic CSS untuk mengetahui dasar dari kedua bahasa pemrograman tersebut.

Penggunaan height dan width yaitu untuk mengetahui lebar dan tingginya suatu element pada sebuah halaman HTML. Ketika kamu hanya memasukkan auto pada suatu elemen tertentu, lebar dan tingginya disesuaikan oleh browser tersebut dan isi di dalam element tersebut. Jika kamu menggunakan yang lebih spesifik seperti px, cm, dan percent(%), element pada sebuah halaman sudah teratur lebar dan tingginya.

Penulisan Kode CSS Dalam HTML #2

Kamu dapat mencoba membuat sebuah HTML dan memasukkan CSS lalu mengatur lebar dan tingginya. Contoh kodingan HTML dapat kamu lihat dibawah ini.

See the Pen CSS_#4 by lintangzakti (@zakti13) on CodePen.

Dalam pemakaian width dan height, kamu juga bisa menambahkan maksimum dan minimum. Pemakaian tersebut berguna untuk mengatur batas dan maksimalnya ukuran dalam suatu element pada HTML. Contoh kodingan dapat kamu lihat dibawah ini.

See the Pen CSS_#4_1 by lintangzakti (@zakti13) on CodePen.

Kamu bisa lihat perbedaan antara dua class diatas, class page1 menggunakan maksimum dan class page2 menggunakan minimum. Kedua class tersebut menggunakan tinggi dan lebar yang sama. Perlu diketahui, jika kamu memakai CSS yang menyesuaikan ukuran seperti border, padding, dan margin.

Jika kalian ingin mencoba, silahkan kalian masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.