Чем правильно задавать верхний отступ на странице сайта padding или margin?
Я задал классу body вот так
. Вроде вопрос простой но так и не нашёл нормального объяснения как правильно.
Дополнительно:
Кто же знает что нарисовано у вас в макете?
Может быть это вообще не отступ, а градиент?
Или отступ, но не у body?
В большинстве современных сайтов там скорее будет padding для header. Но опять же, макет-то где?
- Попробуйте подумать о том, что должно быть с этим отступом, если блок переедет в другое место (представьте что это не хедер)
- Посмотрите на другую ширину макета, например, на мобилку, там есть прямые подсказки.
- Посмотрите, а что с нижним отступом. Всякое бывает в жизни, но отступы стараются стремиться к визуальной симметрии.
- Можно мысленно (или не мысленно) залить блок цветным фоном это помогает понять, красиво ему так или не очень.
объяснение простое: margin - для поведения блока относительно родителя и соседних блоков, padding - для поведения содержимого блока. исходите из ситуации, как для вас будет правильно.
тоесть, ваш .page__body либо будет физически отодвинут от родителя(или соседнего блока) сверху на 13px (margin-top), либо он останется на месте, но его содержимое будет на 13px ниже (padding-top)
блочная модель
ну и что-то такое можно посмотреть, https://habr.com/ru/articles/569530/
- Да я в целом понял, как задаются отступы внутри страницы. Но туплю с полями страницы. Как я понял их без разницы чем задавать, так? Конкретно интересует верхнее поле /
- Rys17, да оно в таком виде разницы нет. возьмите за практику смотреть в девтулз различных сайтов
- modelair, понял, спасибо за ответ.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для правильного задания верхнего отступа на странице сайта можно использовать как padding, так и margin, в зависимости от конкретной ситуации и требований дизайна.
1. Padding:
Padding применяется к содержимому элемента, увеличивая расстояние между содержимым и границами элемента. Если вам нужно добавить отступы между содержимым элемента и его границами, то padding является более подходящим вариантом. Например, если у вас есть блок с текстом и вам нужно добавить отступы вокруг текста, вы можете использовать padding.
Пример использования padding в CSS:
.element { padding-top: 20px; }
2. Margin:
Margin применяется к внешним границам элемента, увеличивая расстояние между элементами. Если вам нужно добавить отступы между элементами на странице, то margin будет более уместным. Например, если у вас есть несколько блоков на странице и вам нужно создать промежуток между ними, вы можете использовать margin.
Пример использования margin в CSS:
.element { margin-top: 20px; }
Выбор между padding и margin зависит от конкретной ситуации и дизайна страницы. Важно учитывать, что использование margin может привести к нежелательным пересечениям элементов на странице, поэтому рекомендуется внимательно планировать структуру и стилизацию элементов при выборе между padding и margin.