Position vs padding и margin. В каких случаях использовать?

Question

[freeman0204]

Я понимаю что с Position можно сверстать весь сайт. Но не думаю что оно было создано именно для этого. Для чего будет нормально использовать Position (есть какие то традиции, хороший тон использования, есть какие то рамки?) а для чего padding и margin? Может вопрос не совсем корректный но все же.

Answer 1

[Александр Тихомиров]

Добрый день. Для примера у Position есть 4 атрибута: абсолютное, относительное, статическое и фиксированное. И у всех у них разное отображение (кроме статического - оно по умолчанию у всех элементов). А маргин и паддинг это просто поля и отступы.

Comments

[freeman0204]

Т.е если нужно подвинуть меню влево, то логичней будет сделать это через Position а поля и отступы это что бы к меню ничего не липло, грубо говоря?

[Александр Тихомиров]

Да, но position, например, может и зафиксировать меню, чтобы при прокрутке страницы оно всегда оставалось в опр. части страницы. При использовании position надо еще очередность кода HTML правильно сделать, чтоб дыр и перекрытий элементов не образовывалось.

[freeman0204]

Александр Тихомиров: "дыр и перекрытий" это вы про поток документа и z-index?

[Александр Тихомиров]

Перекрытия образуются при абсолютном позиционировании элемента относительно краев экрана поверх другого блока (например, при изменении размеров окна браузера или на мобильных устройствах), а "дыры" образуются при относительном позиционировании, когда объект "съезжает" с того места где должен находиться согласно HTML коду.

[freeman0204]

Александр Тихомиров: "При использовании position надо еще очередность кода HTML правильно сделать" Можете натолкнуть в каком направлении гуглить, Вы про семантику? Что имеется введу? Как я понимаю что бы не было "дыр и перекрытий" при уменьшении экрана, нужно добавлять медиа запросы?

Answer 2

[AlikDex]

Самоучитель margin padding
Образовывайтесь наздоровье

Answer 3

[Владимир Солнцев]

На мой взгляд, совсем не уместно - использовать position для выравнивания потока документа. Я использую там, где нужно навести красоту, добавить декора: прилепить иконку к инпуту, приклеить что-то к чему то и т.д.

Паддинг это отступ от содержимого элемента к границе, маргин от границы к следующему элементу.На мой взгляд тут нет четких правил вроде: вот тут можно использовать только паддинг, а вот тут маргин и больше ничего. Использовать на вкус и по макету.
Поиграйтесь сами с разными вариантами, посмотри как что себя ведет, 10 минут практики иногда полезнее нескольких часов зубрежки)
https://webref.ru/ - а тут можно почитать о css.