Belajar css width dan height

belajar css

Kegunaan width dan height

Pada CSS sendiri Anda bisa mengatur lebar dan tinggi pada elemen HTML dengan property width dan height, width yang berarti lebar dan height yang berarti tinggi. Dengan begitu Anda bisa menyesuaikan ukuran lebar maupun tinggi sesuai dengan kebutuhan Anda. Secara default ukuran width dan height tergantung pada konten didalamnya.

Nilai width dan height

Pada property width dan height Anda bisa memberikan nilai sebagai berikut:

  • auto– Ini adalah default. Browser menghitung width dan height secara otomatis
  • length – Mengatur width atau height dengan px, cm, pt dll
  • % – Mengatur width atau height dengan persen
  • initial – Mengatur width atau height ke nilai default
  • inherit – Mengatur width atau height ke nilai warisan dari elemen induknya

Width dan height

Dengan property width dan height Anda bisa memberikan ukuran pada suatu elemen. Width yang berarti lebar dan height yang berarti tinggi.

Contoh:

Editor Online
  1. #merah {
  2. background-color: red;
  3. width: 150px;
  4. height: 80px;
  5. }
  6. #biru {
  7. background-color: blue;
  8. width: 220px;
  9. height: 80px;
  10. }
  11. #hijau {
  12. background-color: green;
  13. width: 270px;
  14. height: 80px;
  15. }

Max-width dan max-height

Dengan property max-width dan max-height Anda bisa memberikan ukuran pada suatu elemen. Max-width yang berarti lebar maksimal dan max-height yang berarti tinggi maksimal.

Contoh:

Editor Online
  1. #hijau {
  2. background-color: green;
  3. max-width: 200px;
  4. max-height: 50px;
  5. }
  6. #kuning {
  7. background-color: yellow;
  8. }

Perhatikan contoh diatas !!

Box hijau diberi style yang membatasi maksimal lebar sebesar 200px dan maksimal tinggi yang diberi 50px.

Jadi box yang berwarna hijau tidak akan bisa mempunyai lebar lebih dari 200px, tetapi bisa mempunyai lebar 200px atau dibawahnya, dan tinggi box hijau tidak akan bisa mempunyai tinggi lebih dari 50px, tetapi bisa mempunyai tinggi 50px atau dibawahnya.

Berbeda dengan box berwarna kuning, yang tidak mempunyai batas lebar maksimal maupun tinggi maksimal.

Min-width dan min-height

Dengan property min-width dan min-height Anda bisa memberikan ukuran pada suatu elemen. Min-width yang berarti lebar minimal dan min-height yang berarti tinggi minimal.

Contoh:

Editor Online
  1. #merah {
  2. background-color: red;
  3. min-width: 300px;
  4. min-height: 100px;
  5. }
  6. #oren {
  7. background-color: orange;
  8. }

Perhatikan contoh diatas !!

Box merah diberi style yang membatasi minimal lebar sebesar 300px dan tinggi yang diberi minimal 100px.

Jadi box yang berwarna merah tidak akan bisa mempunyai lebar dibawah 300px, tetapi bisa mempunyai lebar 300px atau diatasnya, dan tinggi box merah tidak akan bisa mempunyai tinggi dibawah 100px, tetapi bisa mempunyai tinggi 100px atau diatasnya.

Berbeda dengan box berwarna oren, yang tidak mempunyai batas lebar minimal maupun tinggi minimal.

Daftar property width dan height

PropertyKegunaanya
widthMemberikan lebar pada suatu elemen
max-widthMemberikan lebar maksimal pada suatu elemen
min-widthMemberikan lebar minimal pada suatu elemen
heightMemberikan tinggi pada suatu elemen
max-heightMemberikan tinggi maksimal pada suatu elemen
min-heightMemberikan lebar minimal pada suatu elemen

Leave a Reply

Your email address will not be published. Required fields are marked *