Tutorial CSS : Width & Height Dalam CSS

By Admin
CSS
27 Jul 2022

Kegunaan width dan height

Pada CSS sendiri anda bisa mengatur lebar dan tinggi pada elemen HTML dengan properti 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 properti 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 properti width dan height Anda bisa memberikan ukuran pada suatu elemen. Width yang berarti lebar dan height yang berarti tinggi.

Contohnya:

#merah {
    background-color: red;
    width: 150px;
    height: 80px;
}
#biru {
    background-color: blue;
    width: 220px;
    height: 80px;
}
#hijau {
    background-color: green;
    width: 270px;
    height: 80px;
}cssHasilnya:
 
 
 

 

Max-width dan max-height

Dengan properti 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.

Contohnya:

#hijau {
    background-color: green;
    max-width: 200px;
    max-height: 50px;
}
#kuning {
    background-color: yellow;
}

Min-width dan min-height

Dengan properti 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.

Contohnya:

#merah {
    background-color: red;
    min-width: 300px;
    min-height: 100px;
}
#oren {
    background-color: orange;
}

Nah itulah pembahasan tentang properti width dan height dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang width dan height dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Admin
5 min read

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Admin
5 min read

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Admin
5 min read

© 2024