Как правильно делать отступы?

Question

[Arman]

1. Правильно ли понял:
1.1 Если блоки идут горизонтально, то как я понял принято делать отступ справа, левый маргин/паддинг при это 0 (например bootstrap - ul.list-inline)?
1.2 Если блоки идут вертикально, то отступ делают снизу, верхний отступ часто 0 (например <p>)?

2. Как правильно сделать отступы для шапки, футора и контента?

layout.php

<header>
    ...
</header>
<?= $content ?>
<footer>
    ...
</footer>

view.php

<div id="page">
    ...
</div>

2.1. Нужно сделать для header отступ сверху. Что лучше: добавить margin-top: 15px header или padding-top: 15px для body?
2.2. Нужно сделать отступ #page от header. Опять же кому отступать? если header добавить margin-botton: 15px, то всегда будет воздух и не нужно задумывать, но как только #page потребует фон (цвет, картинка), то сразу ломается и нужно переделывать. Выходит лучше чтоб #page сам сделал отступ? padding-top/margin-top: 15px?
2.3. Футор тоже должен иметь отступ от #page (тоже самое что 2.2, но сверху), тоже #page сам делает для себя отступ?

Answer 1

[Alexander]

Первые два вопроса не понятны.

2.1. Body не нужно указывать никаких padding'ов и margin'ов. Для header пропишите padding-top: 15px.
2.2. Сложно сказать.
2.3. Для footer пропишите padding-top: 15px.

P.S. Вообще сложно ответить на вопрос и что-то посоветовать не видя макет. Для разных случаев прописывается код по-разному.

Comments

[Arman]

По первому вопросу: если идет стэк однотипных элементов, то чтоб не плодить отступы со всех сторон использовать только одну сторону?
https://getbootstrap.com/docs/4.2/content/typograp...

.list-inline-item:not(:last-child) {
    margin-right: .5rem;
}

отступ только с одной стороны

https://getbootstrap.com/docs/4.2/content/typograp...

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

тоже отступ с одной стороны

получает снизу или справа, противоположные стараемся не трогать?

2.3 Для footer пропишите padding-top: 15px.
если нужно будет на одной странице картинку прижать к футору? придется тогда #page { padding-bottom: -15px} ?

[Alexander]

1. Верно. Но я бы лучше прописывал всем блокам margin-right, а последнему обнулял.

.list-inline-item:last-child {
    margin-right: 0;
}

2. Тоже верно.

получает снизу или справа, противоположные стараемся не трогать?

Да, если можно обойтись без них, то ни к чему их использовать.

P.S. Однако все зависит от макета (всегда по разному).

если нужно будет на одной странице картинку прижать к футору? придется тогда #page { padding-bottom: -15px} ?

Это все зависит от конкретного макета. Если делать изображение и убрать отступ у footer'а, то не очень красиво если изображение будет прижато к тексту из footer'а.

[Arman]

Alexander, спасибо) кажись разобрался

[Alexander]

Arman, пожалуйста, если что, обращайся :)

Answer 2

[Beliyadm]

Бутстрап использует флоаты, там никакими процентами четко не получится для полурезинового сайта сделать идеальную сетку.
Попробуйте Flexbox https://html5.by/blog/flexbox/, на них выравнивание слева\справа с свойством space-between работает идеально (или гриды, но они чуть сложнее)

Comments

[Arman]

вроде b4 как раз на flexbox

[Beliyadm]

Arman, Да, упустил, что 4-й на флексе. Но тогда тем более непонятен первый вопрос, враппер у нас 100% ставим дочерним 24% и они в 4 колонки красиво расставляются ...
Хотя я против бутстрапа, он сушит мозг

[Arman]

Beliyadm, тут просто пример. а так допустим идет header, #page, footer - кто от кого должен отступ делать? каждый добавляет margin-bottom? или #page сам управляет отступами от шапки и футора.

понимаю все от макета зависит, но более универсальное решение какое-то думал узнать

[Beliyadm]

Ну базовую разметку блоков я никогда не оставляю на стандартные классы фреймворков.
Бывает что на главной и внутренних отступы разные, потому и варьируется подход.
Где-то page с margin-top а где наоборот, у header margin-bottom
Иногда и паддингами отбивается, и отрицательным позиционированием или абсолютным. По ситуации, уникального подхода не бывает