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

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

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

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

Ankhena,

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

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

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

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

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

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

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

Почему логично? В Этой статье например рекомендуют использовать верхний 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WapSter, ух ты класс, спасибо.

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

WapSter, чёрная рамка это просто размер блока. Если margin, то как правильно - верхним блоком отодвигать нижний (margin-bottom) или нижним отодвигать верхний (margin-top)?

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

WapSter, я так понимаю материнский макет, в котором все блоки имеет вот такую ширину:
https://gyazo.com/0bd2ccedfe0436e52c17c9b41f2dbbad

При этом он растягивается под любые размеры и устройства.

Короче уже лезу в дебри, для меня это сложно.

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

WapSter,

С помощью margin или с помощью padding?

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

lamer350, и всё таки, по вопросу подскажете? Если я правильно понимаю принцип работы, то процентный отступ растянется пропорционально, а 30px так и останутся 30px на огромном мониторе, верно?

Приведу пример, имеем монитор 600х600, делаем отступ между блоками 10% = красиво, и делаем отступ 30px = красиво. Но теперь переносим макет на монитор 5000х5000, 10% = растянулось красиво, как и всё остальное, а вот 30px так и остались 30px среди 5000х5000. Или я ошибаюсь?

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

Если я задаю такие простые вопросы, то очевидно, что до всяких Flex'ов и Grid'ов мне ещё оч далеко)))

Можно ли заключать в тег заголовка слово или фразу не являющуюся заголовком как таковым?

Const Ken, да, если нужен ключ...

Можно ли заключать в тег заголовка слово или фразу не являющуюся заголовком как таковым?

Const Ken, т.е. вывод напрашивается такой, что просто так для абы каких слов h2-h6 нельзя использовать, верно?

Можно ли заключать в тег заголовка слово или фразу не являющуюся заголовком как таковым?

Const Ken, т.е. чтобы на странице был один h1, и хоть 50 h2, потом например 10 h3 и т.д.? Верно?