Tutorial Belajar CSS: Cara Mengatur Lebar Element HTML (width)

Posted on

Property pertama-tama yang akan kita bahas terkait CSS Box Model ialah width. Property ini digunakan untuk mengatur lebar dari sebuah element HTML, apakah itu berupa paragraf, gambar, atau tag ‘general’ seperti <div>.


Cara Mengatur Lebar Element HTML dengan CSS

Untuk mengatur lebar element HTML dengan CSS, kita dapat menggunakan propety width. Property ini diisi dengan satuan seperti pixel, persen, em, dll.

Selaku contoh, untuk membangun lebar sebuah tag <div> menjadi 400 pixel, saya dapat menulis selaku berikut:

Di contoh ini saya menggunakan inline style CSS. Seandainya menggunakan internal style CSS, kita tinggal menempatkannya ke di tag <style>, seperti berikut ini:

Di contoh diatas saya membangun 5 tag <div> dengan lebar yang berbeda-beda. Setiap lebar diatur menggunakan property width.

Selain menggunakan satuan yang tetap seperti pixel, kita pun dapat menggunakan satuan relatif seperti persen. Berikut contohnya:

Dengan memberikan nilai di satuan persen, kini lebar dari tag <div> akan menyesuaikan tergantung lebar web browser. Silahkan sobat mengubah lebar jendela web browser, karenanya lebar dari setiap kotak pun akan mengikuti.

Namun, bagaimana contoh implementasi sebetulnya dari property width ini?

Seketika saja kita lanjut ke contoh berikutnya:

Kali ini saya membangun 3 buah paragraf yang berisi dummy teks (lorem ipsum). Di paragraf pertama-tama, saya tak menggunakan property apa-apa. Terlihat bahwa secara default, sebuah paragraf akan melebar memenuhi parent element, yang di contoh diatas akan melebar sepanjang lebar web browser.

Di paragraf kedua dan ketiga saya mengatur lebarnya dengan property width, sehingga lebar paragraf akan dibatasi.

Berikutnya, kita akan membahas cara mengatur tinggi element menggunakan property height CSS.


eBook CSS Uncover Duniailkom

Seandainya sobat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/