HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS
warna RGB HEX HSL
Latar Belakang CSS
Warna latar belakang Gambar latar belakang Pengulangan Latar Belakang Lampiran Latar Belakang Singkatan Latar Belakang
Batas CSS
perbatasan Lebar Perbatasan Warna Perbatasan Sisi Perbatasan Singkatan Perbatasan Rounded Borders
Margin CSS
Margins Margin Collapse
Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Teks CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikon CSS Tautan CSS Daftar CSS Tabel CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float
Float Clear Float Examples
CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS
Navbar Vertical Navbar Horizontal Navbar
Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS
Linear Gradients Radial Gradients Conic Gradients
Bayangan CSS
Shadow Effects Box Shadow
Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Tinggi dan Lebar CSS

❮ Sebelumnya Berikutnya ❯

CSS heightdan widthproperti digunakan untuk mengatur tinggi dan lebar suatu elemen.

Properti CSS max-widthdigunakan untuk mengatur lebar maksimum suatu elemen.

Elemen ini memiliki tinggi 50 piksel dan lebar 100%.

CSS Mengatur tinggi dan lebar

Properti heightand widthdigunakan untuk mengatur tinggi dan lebar suatu elemen.

Properti tinggi dan lebar tidak termasuk bantalan, batas, atau margin. Ini mengatur tinggi/lebar area di dalam padding, border, dan margin elemen.

Nilai tinggi dan lebar CSS

Properti heightand widthmungkin memiliki nilai berikut:

  • auto- Ini default. Browser menghitung tinggi dan lebar
  • length- Mendefinisikan tinggi/lebar dalam px, cm dll.
  • %- Mendefinisikan tinggi/lebar dalam persen dari blok yang mengandung
  • initial- Mengatur tinggi/lebar ke nilai defaultnya
  • inherit- Tinggi/lebar akan diwarisi dari nilai induknya

Contoh tinggi dan lebar CSS

Elemen ini memiliki tinggi 200 piksel dan lebar 50%

Contoh

Atur tinggi dan lebar elemen <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Elemen ini memiliki tinggi 100 piksel dan lebar 500 piksel.

Contoh

Atur tinggi dan lebar elemen <div> lainnya:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Catatan: Ingatlah bahwa properti heightand widthtidak menyertakan padding, border, atau margin! Mereka mengatur tinggi/lebar area di dalam padding, border, dan margin elemen!

Mengatur lebar maksimum

Properti max-widthini digunakan untuk mengatur lebar maksimum suatu elemen.

Itu max-widthdapat ditentukan dalam nilai panjang , seperti px, cm, dll., atau dalam persen (%) dari blok yang berisi, atau disetel ke none (ini default. Berarti tidak ada lebar maksimum).

Masalah di <div>atas terjadi ketika jendela browser lebih kecil dari lebar elemen (500px). Browser kemudian menambahkan scrollbar horizontal ke halaman.

Menggunakan max-widthsebagai gantinya, dalam situasi ini, akan meningkatkan penanganan browser terhadap jendela kecil.

Tip: Seret jendela browser ke lebar lebih kecil dari 500px, untuk melihat perbedaan antara kedua div!

Elemen ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel.

Catatan: Jika Anda karena alasan tertentu menggunakan widthproperti dan max-widthproperti pada elemen yang sama, dan nilai widthproperti lebih besar dari max-widthproperti; properti max-widthakan digunakan (dan widthproperti akan diabaikan).

Contoh

Elemen <div> ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel: 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Cobalah Sendiri - Contoh


Contoh ini menunjukkan cara mengatur tinggi dan lebar elemen yang berbeda.


Contoh ini menunjukkan cara mengatur tinggi dan lebar gambar menggunakan nilai persen.


Contoh ini menunjukkan cara mengatur lebar minimum dan lebar maksimum suatu elemen menggunakan nilai piksel.


Contoh ini menunjukkan cara mengatur tinggi minimum dan tinggi maksimum suatu elemen menggunakan nilai piksel.

Uji Diri Anda Dengan Latihan

Olahraga:

Atur tinggi elemen <h1> ke "100px".

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Semua Properti Dimensi CSS

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ Sebelumnya Berikutnya ❯