- PVSM.RU - https://www.pvsm.ru -
Одним из основных принципов верстки является гибкость. А именно возможность легко вносить какие-либо изменения и ничего при этом не сломать.
Умение правильно обращаться с margin и padding играет очень большую роль в этом деле.
Основные принципы:
margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.
Это значит.что такие свойства как margin-left и margin-top не используются ( бывают исключения ). Если нужен отступ сверху, то используется padding-top для родителя. По тому же принципу padding-left для родителя.
Важно соблюдать осмысленную структуру во всем, можно назвать это семантикой. Отступы идут в направлении потока дом дерева, блок сам себя не толкает.
Это значит. что отступы задаюся соседним элементам дом дерева.
Для простого примера можно взять меню( список ссылок ).
ul>li*4>a
Чтоб сделать расстояние между ссылками задается отступ не для ссылки, а для лишки, лишка будет последним, и отступ будет между соседними элементами. Пример с меню довольно простой и банальный. Но если представить вложенность до 10 блоков, то можно намусорить маргинами и падингами.
Если взять body>h1, и нужно сделать отступ для заголовка сверху, то последний элементом будет body и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять
Самая простая причина, по которой стоит придерживаться данного принципа, это чтоб было проще найти отступ в будущем, либо вам, либо тому, кто будет в дальнейшем работать с вашей версткой. Это если говорить про удобство.
Настоящие проблемы могут возникнуть, когда вывод блоков с плохой структурой отступов выводится динамически или дублируется.
Никогда не делайте отступы елементов, которые могут использоваться больше чем один раз.
Даже, если в макетах вы видите, что отступ везде одинаковый.
Для этого есть обертки. Обертки это хорошо. Либо дополнительные классы.
Если нужно сделать блоку отступ. Без ущерба это делается с помощью:
.block__item > .block { margin-right: 10px; }
.user-description__avatar > .avatar { margin-right: 10px }
Таким же образом осуществляется позиционирование.
Возьмем для примера список.
Чаще чем другие псевдоклассы, вы должны использовать :last-child. Последний отступ никогда не должен оставаться. Если есть расстояние между последней лишкой и новым блоком, то этот отступ делается не за счет лишки. А список отступает.
Исключением обычно служит список товаров, где в ряду может быть от 2 ячеек и обнулять отрицательным маргином последние отступы не всегда целесообразно, но желательно.
Автор: Железный человек
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/pesochnitsa/265809
Ссылки в тексте:
[1] Источник: http://habrahabr.ru/sandbox/111714/
Нажмите здесь для печати.