Perbedaan % (Persen) dan vh/vw (Viewport Height/Width) Pada CSS

Satuan untuk menentukan ukuran panjang dan lebar di CSS yang kita kenal ada px, em, %, dan viewport (v).

Artikel kali ini kita akan membedakan antara % dan vh/vw.

Sebagai informasi, vw dan vh mewakili lebar dan tinggi viewport.

Perbedaan antara menggunakan width: 100vw dan width: 100% adalah: pada 100% akan membuat elemen sesuai dengan ruang yang tersedia, lebar area yang memiliki ukuran tertentu, dalam hal ini lebar layar yang tersedia, termasuk margin dokumen.

Jika Anda mengatur style css pada body dengan nilai margin: 0, 100vw akan memiliki berperilaku sama dengan 100%. Viewport beracuan pada ukuran layar, sedangakan % beracuan pada ukuran elemen yang membungkus elemen tersebut.