Проблема из-за схлапывания отступов.
Не могу понять как именно оно работает в данном случае, но решается как в обычном случае со схлапыванием:
Схлопывание не срабатывает:
- для элементов, у которых установлено свойство padding.
- для элементов, у которых на стороне схлопывания задана граница;
- на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
- на плавающих элементах (для них свойство float задано как left или right);
- для строчных элементов;
Т.е. border или padding для body сверху
Или float для .relative
Простой
Средний
