Единици vw и vh в CSS

Единиците vw и vh позволяват да се зададе размер спрямо областта за преглед на прозореца на браузъра. Нека да разгледаме пример.

Да предположим, че имаме някакъв div:

html<div></div>

Нека му зададем ширина, равна на половината от ширината на областта за преглед, и височина, равна на половината от височината на областта за преглед:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

Нека видим какво получихме:

Задание 1

Даден е div. Задайте му отстъп отгоре, равен на 30% от височината на областта за преглед.

Задание 2

Даден е div. Задайте му ширина и височина, равни на 70% от ширината на областта за преглед.