Чем правильно задавать верхний отступ на странице сайта padding или margin?

Question

[Rys17]

Я задал классу body вот так . Вроде вопрос простой но так и не нашёл нормального объяснения как правильно.

Comments

[Ankhena]

Кто же знает что нарисовано у вас в макете?

Может быть это вообще не отступ, а градиент?
Или отступ, но не у body?

В большинстве современных сайтов там скорее будет padding для header. Но опять же, макет-то где?

[Ankhena]

В Котике это паддинг у хедера или nav, смотря что вы написали в разметке.

- Попробуйте подумать о том, что должно быть с этим отступом, если блок переедет в другое место (представьте что это не хедер)
- Посмотрите на другую ширину макета, например, на мобилку, там есть прямые подсказки.
- Посмотрите, а что с нижним отступом. Всякое бывает в жизни, но отступы стараются стремиться к визуальной симметрии.
- Можно мысленно (или не мысленно) залить блок цветным фоном это помогает понять, красиво ему так или не очень.

Answer 1

[modelair]

объяснение простое: margin - для поведения блока относительно родителя и соседних блоков, padding - для поведения содержимого блока. исходите из ситуации, как для вас будет правильно.
тоесть, ваш .page__body либо будет физически отодвинут от родителя(или соседнего блока) сверху на 13px (margin-top), либо он останется на месте, но его содержимое будет на 13px ниже (padding-top)
блочная модель
ну и что-то такое можно посмотреть, https://habr.com/ru/articles/569530/

Comments

[Rys17]

Да я в целом понял, как задаются отступы внутри страницы. Но туплю с полями страницы. Как я понял их без разницы чем задавать, так? Конкретно интересует верхнее поле /

[modelair]

Rys17, да оно в таком виде разницы нет. возьмите за практику смотреть в девтулз различных сайтов

[Rys17]

modelair, понял, спасибо за ответ.