Единицы измерения css для блочных элементов

В данной статье речь пойдёт про единицы измерения css для блочных элементов. В css3 у нас расширился инструментарий для работы с блоками такими правилами как: width, height, padding, margin, border-radius

1. em — padding, margin, border-radius рассчитывается относительно font-size, где значение font-size:20px = padding: 1em

1
2
3
4

div{
   font-size:20px;
   padding: 2em; // 40px с каждой стороны
}

2. rem рассчитывается на основе тега html (правила font-size, если значение не указано, то берётся по умолчанию браузера = 16px)

padding, margin, border-radius рассчитывается относительно font-size

3. vw – 1% ширины окна

4. vh – 1% высоты окна

5. vmin – наименьшее из (vw, vh)

1
2
3
4

div{
   width: 100vmin;
   height: 100vmin;
}

6. vmax – наибольшее из (vw, vh)