Belajar CSS – Cara Mengatur Lebar dan Tinggi Element HTML

dalam tutorial css box model saya sudah membahas sedikit tentang cara menggunakan property width dan height, kedua property ini berfungsi untuk mengatur lebar dan tinggi element html. jika belum dibaca silakan dibaca dulu.

dalam tutorial kali ini saya masih membahas css box model, saya akan mengatur lebar dan tinggi dari suatu element html, dimana dalam penentuan nilainya sering keliru.

saya juga akan menjelaskan perbedaan dalam mengatur lebar dan tinggi suatu elemen html antara box model dan tanpa box model.

Cara Mengatur Lebar Element HTML

Belajar CSS - Cara Mengatur Lebar dan Tinggi Element HTML
Belajar CSS – Cara Mengatur Lebar dan Tinggi Element HTML

untuk mengatur lebar elemen html menggunakan css kita bisa memakai property width, penulisannya seperti ini width: 32px;

dengan property width kita bisa mengatur lebar suatu element html baik paragraf, image, video ataupun yang lainnya.

untuk menentukan nilai dari property width kita bisa mengunakan salah satu satuan pixel, em, persen dll.

Contoh mengatur lebar elemen

kalau kita hanya belajar teori kayaknya bakalan tambah pusing dan gak ngerti mending kita pakai contoh saja agar lebih mudah dipahami.

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  background-color: rgb(171, 255, 255);
  padding: 5px;
  border: 2px solid Grey;
  margin: 25px;
  }
  .k1 { width: 50px;}
  .k2 { width: 100px;}
  .k3 { width: 400px;}
  .k4 { width: 500px;}
  .k5 { width: 1000px;}
  </style>
  </head>
  <body>
  <h2>Contoh Mengatur Lebar Element HTML Menggunakan CSS</h2>
  <div class="k1">Kotak</div>
  <div class="k2">Kotak Kosong</div>
  <div class="k3">Kotak Kosong</div>
  <div class="k4">Kotak Kosong</div>
  <div class="k5">Kotak Kosong</div>
</body>
  </html>

dalam contoh diatas saya menerapkan property width dalam setiap elemen div, serta dibedakan berdasarkan class masing-masing. nilai satuan yang dipakai adalah pixel (px).

sekarang bagaiman jika satuan yang kita pakai dalam mengatur lebar dari element itu adalah satuan persen. maka caranya sebagai berikut.

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  background-color: rgb(171, 255, 255);
  padding: 5px;
  border: 2px solid Grey;
  margin: 25px;
  }
  .k1 { width: 10%;}
  .k2 { width: 20%;}
  .k3 { width: 30%;}
  .k4 { width: 50%;}
  .k5 { width: 90%;}
  </style>
  </head>
  <body>
  <h2>Contoh Mengatur Lebar Element HTML Menggunakan CSS</h2>
  <div class="k1">Kotak</div>
  <div class="k2">Kotak Kosong</div>
  <div class="k3">Kotak Kosong</div>
  <div class="k4">Kotak Kosong</div>
  <div class="k5">Kotak Kosong</div>
</body>
  </html>

dari contoh nilai satuan yang memakai persen ini terlihat bahwa nilai yang 90% akan sesuai dengan lebar layar browser, jika nilainya 100% akan melebihi lebay layar browser. coba ganti nilai 90% dengan 100%, lalu jalankan.

kenapa nilai 100% melebihi lebar browser?

ini karena kita memakai property lain seperti nilai properti border, margin, padding, dalam box model nilai ini juga akan dihitung oleh web browser, oleh karena itulah jika nilai 100% akan melebihi lebar dari web browser

untuk membuktikannya, silakain ganti nilai padding, border, margin dengan nol (0) lalu jalankan dan lihat hasilnya

perlu di ingat bahwa element html dalam box model itu berbeda dengan element html diluar box model. dan fungsi width dalam box model juga berbeda dengan yang width diluar box model.

berikut contoh property width dengan box model dan tanpa box model

<!DOCTYPE html>
  <html>
  <head>
  <style>
  .paragraf { 
    width: 500px;
    height: 50px;
    text-align: justify;
    padding: 50px;
    }

  div {
  background-color: rgb(171, 255, 255);
  padding: 50px;
  border: 2px solid Grey;
  margin: 25px;
  width: 500px;
  }
  .k1 { width: 10%;}
  .k2 { width: 20%;}
  .k3 { width: 30%;}

  </style>
  </head>
  <body>
  <h2>Contoh Mengatur Lebar Element HTML Menggunakan CSS</h2>
  <div class="k1">Kotak</div>
  <div class="k2">Kotak Kosong</div>
  <div class="k3">Kotak Kosong</div>
  <div class="k4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi tortor, 
  imperdiet sed hendrerit non, consequat luctus magna. Nullam accumsan odioac lectus mollis finibus. 
  Maecenas imperdiet feugiat felis, sit amet ullamcorper elit vulputate in.</div>
  <p class="paragraf">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 
accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 
felis, sit amet ullamcorper elit vulputate in.
</p>
</body>
</html>

kedua text lerem ipsum diatas memiliki width sama-sama 500px, tapi lebih lebar yang tanpa kota dari pada yang di dalam kotak.

untuk referensi penggunaan ukuran width bisa lihat disini w3schools.com

Cara Mengatur Tinggi Element HTML

untuk mengatur tinggi dari element html tidak jauh berbeda dengan mengatur lebar element, jika dalam mengatur lebar elemen kita mekai width, maka untuk mengatur tinggi kita memakai propety height.

satuan value atau nilai dari property height juga sama dengan property width. yaitu memakai px, persen dan em.

contoh mengatur tinggi elemen dengan css

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  background-color: rgb(171, 255, 255);
  padding: 5px;
  border: 2px solid Grey;
  margin: 25px;
  width: 100px;
  }
  .k1 { height: 50px;}
  .k2 { height: 100px;}
  .k3 { height: 400px;}
  .k4 { height: 500px;}
  .k5 { height: 1000px;}
  </style>
  </head>
  <body>
  <h2>Contoh Mengatur Tinggi Element HTML Menggunakan CSS</h2>
  <div class="k1">Kotak</div>
  <div class="k2">Kotak Kosong</div>
  <div class="k3">Kotak Kosong</div>
  <div class="k4">Kotak Kosong</div>
  <div class="k5">Kotak Kosong</div>
</body>
  </html>

contoh mengatur tinggi elemen menggunakan persen

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  background-color: rgb(171, 255, 255);
  padding: 5px;
  border: 2px solid Grey;
  margin: 25px;
  width: 100px;
  }
  .k1 { height: 10%;}
  .k2 { height: 20%;}
  .k3 { height: 30%;}
  .k4 { height: 50%;}
  .k5 { height: 90%;}
  </style>
  </head>
  <body>
  <h2>Contoh Mengatur Tinggi Element HTML Menggunakan CSS</h2>
  <div class="k1">Kotak</div>
  <div class="k2">Kotak Kosong</div>
  <div class="k3">Kotak Kosong</div>
  <div class="k4">Kotak Kosong</div>
  <div class="k5">Kotak Kosong</div>
</body>
  </html>

untuk membuat tinggi dan lebarnya dari semua kotak berbeda antara kotak satu dan dua cukup tambahkan property width kedalam setiap class seperti dibawah ini

.k1 { width: 10% height: 10%;}
.k2 { width: 20% height: 20%;}
.k3 { width: 30 %height: 30%;}
.k4 { width: 50% height: 50%;}
.k5 { width: 90% height: 90%;}

dari semua contoh diatas kita sudah mengatur lebar dan tinggi suatu element html, kita juga sudah mengatur lebar dan tinggi elemen berdasarkan nilai persen dan pixel.

sebenarnya kita bisa mengatur lebar dan tinggi element lain seperti contohnya elemen tabel, form, atau gambar. jika ada yang membutuhkan cara mengatur elemen-elemen ini bisa request dari komentar agar dibuatkan tutorialnya.

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas