Что лучше использовать в блочной верстке — margin или padding?

Question

[pihachu]

При работе с конструктором, для множества блоков, внутри которых другие дочерние блоки, что-то типа:

container general { /* общий каркас сайта */

div 1 {
}

div 2 {
section 2.1 {
content;
}
}
}

(сорри за код, в вёрстке вообще ноль)

Может так нагляднее будет:


Как лучше использовать margin и padding если для любого дива на срине можно задать и то, и другое?
Приклеить ли главные дивы (div 1, div 2, div 3) друг к другу и двигать дочерние блоки/секции (1.1, 1.2...2.1, 2.2.... 3.1, 3.2)? Чем, margin'ом сверху иди padding'ом сверху? Или не трогать дочерние, а двигать главные (div 1, div 2 etc)

Извините, если вопрос не очень понятен. Я сам пытался разобраться. Читал статьи на хабре, чекал разные сайты через консоль (везде вроде используют padding). Просто когда див внутри дива, а внутри её див, то как лучше их выравнивать?

UPD.
Попробую проще сформулировать:

<block 1>
<content></content>
</block 1>

<block 2>
<content></content>
</block 2>

(вокруг белое поле)

Для block 2 задали бы margin-top или для content 2 задали бы margin-top/padding-top?

Comments

[Ankhena]

Там в комментария ссылки на отличные статьи В каких единицах лучше делать отступы между блоками при вёрстке?

[Ярослав Иванов]

Margin внешние отступы
Padding внутрение отступы
Какие тут ещё вопросы?

Создай блок с 100x100 с фоном, примени свойства и найди разницу

[pihachu]

Ankhena, я читал. Не понял, что использовать когда много блоков. Понятно, что если бы был один блок, внутри которого допустим список + картинка, то просто юзали бы margin-top для картинки. Но когда много блоков, друг за другом и им можно задать поля и отступы, а внутри них ещё блоки, которым тоже можно задать поля и отступы, тут я уже путаюсь.

[pihachu]

Ярослав Иванов, я знаю, что такое margin и что такое padding.

Попробую проще спросить:

<block 1>
<content></content>
</block 1>

<block 2>
<content></content>
</block 2>

И для block, и для content можно задать и margin, и padding. Что бы выбрали - двигали главные блоки друг от друга или двигали бы content в блоке 2?

[pihachu]

Ярослав Иванов, т.е. для block 2 задали бы margin-top/padding-top или для content 2 задали бы margin-top/padding-top?

[Евгений]

pihachu, короч, двигай внешним, если не получается, тогда внутренним)

[Ankhena]

pihachu, я даже не знаю, что к ним добавить.
Почитайте про БЭМ, подумайте как эти блоки можно переиспользовать в других местах или на других сайтах. Какие свойства они должны потащить за собой, а какие нет.
Не обязательно потом использовать БЭМ, но это дает представление о происходящем.

Можно упростить. Если это первая работа, то без разницы, просто для начала сделайте, чтобы совпадало с макетом. И так десяток-другой макетов. В процессе найдете закономерности, что часть блоков похожи друг на друга и хорошо бы их делать какими-то универсальными удобными для вас методами.
Потом почитайте кодгайды разных компаний, разные best practices и те статьи еще раз.
Со временем прояснится.

[pihachu]

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

Я как раз и пытаюсь всё сделать правильно по уму "здесь и сейчас", т.к. эту страницу потом можно дублировать под другие нужды, и не очень бы хотелось плодить ошибки, которые потом исправлять 3 года и 92 месяца.

[Вова Дружаев]

Ankhena, какой и накой ему BEM - ему бы в margin/padding разобраться))

[Ankhena]

pihachu,

Я как раз и пытаюсь всё сделать правильно по уму "здесь и сейчас", т.к. эту страницу потом можно дублировать под другие нужды, и не очень бы хотелось плодить ошибки, которые потом исправлять 3 года и 92 месяца.

Во-первых, по другому не бывает.
Во-вторых, для начала придется понять те статьи.

[Ankhena]

pihachu,

да, я ж об этом и спрашиваю - отодвигать контент внутри блока или отодвигать блок?

Напишите аргументы за padding и за margin.

И контрольный в голову: в статьях что по этому поводу написано?

[pihachu]

Ankhena, если мы двигаем блоки, а не отступы между контентом и мы используем белый/прозрачный фон, мне кажется нет разницы, что использовать - padding-top или margin-top. Т.к. и margin и padding просто "расширит" верхнюю белую границу тем самым отодвинув блок.

Если же блок например с фоном (картинка/цвет), то используя margin для блока мы отодвинем блок+фон, а используя padding мы как бы расширим видимость фона.

И контрольный в голову: в статьях что по этому поводу написано?

В статьях повествование ведётся про один блок внутри которого контент, который мы и двигаем с помощью margin-top в одной статье, и margin-bottom в другой ВНУТРИ БЛОКА. А сам блок сужаем с помощью padding.

Но ничего не сказано просто два, три, четыре блока, внутри которых контент.

[Ankhena]

pihachu,

если мы двигаем блоки, а не отступы между контентом и мы используем белый/прозрачный фон, мне кажется нет разницы, что использовать - padding-top или margin-top. Т.к. и margin и padding просто "расширит" верхнюю белую границу тем самым отодвинув блок.

Если же блок например с фоном (картинка/цвет), то используя margin для блока мы отодвинем блок+фон, а используя padding мы как бы расширим видимость фона.

Ага.
Теперь следующие аргументы:
1. мы хотим получить более или менее универсальное решение.
2. мы не знаем когда придет дизайнер и захочет перекрасить фон.

[pihachu]

Ankhena, для блоков понял - лучше использовать margin-top. Спасибо.

Но вопрос в другом,

<block 1>
<content></content>
</block 1>

<block 2>
<content></content>
</block 2>

И для block, и для content можно задать и margin, и padding. Что бы выбрали - двигали главные блоки друг от друга или двигали бы content в блоке 2, тем самым получая тот же эффект?

(с точки зрения чистоты и правильности кода)

[Ankhena]

pihachu,

для блоков понял - лучше использовать margin-top. Спасибо.

Господи, как?
Вы же сами тут где-то в комментариях к схлопыванию писали, что можно писать только один. Логично, что нижний, а не верхний.
Но разумным ответом был бы padding. Там же фон может быть, содержимое не должно прилипнуть к краю фона.

И для block, и для content можно задать и margin, и padding. Что бы выбрали - двигали главные блоки друг от друга или двигали бы content в блоке 2, тем самым получая тот же эффект?

Padding для блока и margin-bottom для дочерних, если их несколько.
Потому что margin вываливаются. И margin-top у дочернего не даст того же эффекта, как padding-top у родителя.
Смотрите: https://jsfiddle.net/nxqsupLh/
Задан margin-top дочернему блоку, но он оттолкнул не дочерний от зеленого родителя, а своего родителя от края окна.
Да, сейчас, в основном, флексы и у них нет схлопывания. Но нет никакой гарантии, что макет не поменяется и вместо флекса не будет просто блок. Тогда придется вспоминать "ах да, черт, еще отступы ведь надо поправить... так... а на что поменять?... ага... поменяли... ой, всё уехало... надо бы заново переверстать"

[pihachu]

Логично, что нижний, а не верхний.

Почему логично? В Этой статье например рекомендуют использовать верхний margin.
https://habr.com/ru/company/netcracker/blog/281008/

А в это статье человек предложил использовать нижний, так его заклевали в комментариях и тоже рекомендуют использовать верхний:
https://habr.com/ru/post/340420/

Но разумным ответом был бы padding. Там же фон может быть, содержимое не должно прилипнуть к краю фона.

Об этом не подумал.

Потому что margin вываливаются. И margin-top у дочернего не даст того же эффекта, как padding-top у родителя.
Смотрите: https://jsfiddle.net/nxqsupLh/

Ух ты, этого не знал. Ну вот у меня, как я понял, схлопывания не происходит:
https://gyazo.com/cae8e5754fd150ac15ea8c73f830601d

Синий - это родитель, а оранжевый margin-top: 40px

[Ankhena]

pihachu,

Почему логично?

Я не права, логика не при чем, конечно.
Точнее при чем, но не в том смысле ))) А вот в таком: плохо, когда каша. Хорошо, когда единообразно. По мере возможности, потому что макеты всякие попадаются.

Ну вот у меня, как я понял, схлопывания не происходит:

Скрины это прекрасно. Я тоже могу в фотошопе нарисовать блоки и их родителей. И ничего не схлопнется.
Есть свойства, которые отменяют схлопывание.
Но вы же только скрин показываете, а не код. (под словом код имеется в виду не сюда простыню, а ссылку на песочницу)

[pihachu]

Ankhena,

Есть свойства, которые отменяют схлопывание.

Это всё в конструкторе вордпресс на премиум теме, предполагаю что там встроены всякие эти ваши флексы и гриды))

Т.е. вы советуете

Padding для блока и margin-bottom для дочерних, если их несколько.

Т.е. padding'ом отодвигаем начало первого контента, а дальше уже сам контент margin-bottom?

[pihachu]

Ankhena, дайте какой-нибудь контакт для доната (скрил было бы норм). Вы так подробно всё разжовывали, что не отблагодарить было бы грех.

[pihachu]

Ankhena, если тут так принято, конечно.

[Ankhena]

pihachu, это мой добровольный вклад в развитие отрасли :)
Но приятно, что у вас появилось такое желание.

Answer 1

[Вова Дружаев]

2 margin схлопываются - для внешних отступов - идеально.
padding - внутренние отступы. Без них никак если захочешь border-ом обвести и выделить блок.
есть еще line-height - межстрочный интервал. Но думаю с ним тебе через год практики на первых двух надо переходить ;-)

Comments

[pihachu]

2 margin схлопываются

Схлопываются вроде бы только нижний у предыдущего и верхний у следующего. Не представляю зачем так использовать, если все можно задавать только margin-top.

padding - внутренние отступы. Без них никак если захочешь border-ом обвести и выделить блок.

Сколько сайтов просмотрел, все в основном и используют только padding для отступов даже без бордера. Т.е. тупо отодвигают контент внутри блока.

[Ankhena]

pihachu,

тупо отодвигают контент внутри блока.

Вы знаете, padding именно для этого и нужен. Отодвигать контент внутри блока.

[pihachu]

Ankhena, да, я ж об этом и спрашиваю - отодвигать контент внутри блока или отодвигать блок?

Answer 2

[Макс]

Это тоже самое как спросить. А мне кушать ложкой или вилкой? Всему свое место. В хорошей вёрстке используется и то и другое. Попробуйте ссылке прописать inline-block и отодвинуть ссылку слева. Вы увидите, что подчеркивание у ссылки будет слишком длинное при padding. К тому же для inline не работают margin-top, margin-bottom

Comments

[pihachu]

В хорошей вёрстке используется и то и другое.

Думаю в хорошей вёрстке используется и то и другое, но с единым стилем.