Sebuah elemen di html masing-masing memiliki jarak dan lebar yang berbeda satu sama lainnya, dalam tutorial kali ini kita akan membahas bagaimana cara mengatur lebar elemen dengan css. Dengan mengatur lebar elemen tentunya akan menghasilkan sebuah halaman website yang tidak berantakan, menjadi lebih rapih dan tentunya enak udah pembaca.
Berikut ini adalah beberapa cakupan properti-properti yang akan kita bahas dalam tutorial mengatur lebar elemen dengan css ini.
- width digunakan untuk mengatur lebar elemen
- min-width digunakan untuk mengatur lebar minimum
- max-width digunakan untuk mengatur lebar maksimum
Masing-masing properti diatas sama-sama memiliki fungsi yang sama, yaitu untuk mengatur lebar sebuah elemen, namun ada perbedaan yang mendasar yang akan kita bahas pada tutorial ini.
Cara Mengatur Lebar Elemen Dengan CSS
Untuk mengatur lebar elemen dapat menggunakan properti-properti diatas, dengan nilai satuan ukuran dapat menggunakan persen dan lain sebagainya. Untuk dapat mengatur lebar elemen yang pertama akan kita bahas yaitu menggunakan properti width dimana pada elemen yang akan dibuat nanti ditambahkan garis atau border agar elemen lebih terlihat.
<style type="text/css">
.elemen {
border: 1px solid #000;
width: 250px;
}
</style>
<div class="elemen">Mengatur lebar dengan jarak 250 pixel</div>Code language: HTML, XML (xml)Beriku ini adalah hasil dari source code diatas…
Elemen diatas telah ditentukan memiliki jarak lebar sebesar 250 pixel, selain dengan pixel kita dapat juga menggunakan satuan ukuran lain, seperti persentase dan lain sebagainya.
Menentukan lebar minimum elemen dengan css
Selain dengan ukuran solid, sebuah elemen dapat ditentukan nilai minimum lebar dari elemen tersebut, sehingga batas elemen akan terlihat seperti dinamis.
<style type="text/css">
.elemen {
border: 1px solid #000;
width: 100%;
min-width: 300px;
}
</style>
<div class="elemen">Mengatur lebar minimum elemen</div>Code language: HTML, XML (xml)Kode diatas terlihat sebuah elemen memiliki lebar 100% dan min-width 300px, maksud dari kode tersebut adalah dengan lebar 100% artinya elemen tersebut memenuhi ukuran browser secara penuh, tetapi jika ukuran browser diperkecil sampai batas minimum browser tersebut maka ukuran elemen akan bertahan pada lebar 300 pixel.
Untuk melihat hasilnya silahkan ukuran browser anda diperkecil, maka elemen yang telah ditentukan ukuran minimumnya akan tetap pada ukuran minimum tersebut.
Mengatur Lebar Maksimum Elemen Dengan CSS
Untuk mengatur lebar maksimum elemen yaitu dengan menggunakan properti max-width, properti max-width ini kebalikan dari properti min-width, jika elemen maksimum telah ditentukan, maka batas lebar elemen tersebut akan berhenti.
<style type="text/css">
.elemen {
border: 1px solid #000;
min-width: 400px;
max-width: 600px;
}
</style>
<div class="elemen">Mengatur lebar maksimum elemen</div>Code language: HTML, XML (xml)Pada kode di atas terlihat bahwa sebuah elemen memiliki lebar minimum 400px dan lebar maksimum 600px, untuk melihat apakah lebar tersebut bekerja anda dapat menggunakan browser yaitu dengan cara memainkan panjang lebar browser tersebut mulai dari ukuran terkecil sampai ukuran lebar maksimum browser anda.
