Как указывать разные отсупы у секций с разными цветами?Как правильно организовать разные расстояня?
Это самая больная тема для меня и я до сих пор ее не понимаю
Вот пример https://codepen.io/poylar/pen/RwByGZZ
Как нужно укзаывать оступы между секциями?Сверху снизу?Использовать паддинг или маджин?Как прийти к одному варианту?Как быть когда отсуп сверху не нужен или нужен двойной отступ снизу?Прокидывать все классами и модификаторами?Или использовать css селекторы типа ~ + .
Этот же вопрос касается и заднего фона секций, где то он цвета всего сайта, а где то цвет уникальный , так же цветной блок находится между бесцветных, то отсуп умножается на 2 от базового.
Сайты которые я верстаю зачастую имеют разные отступы между секциями и писать по 50 модификаторов для каждой секции мне кажется не верным решением. Причем один и тот же блок может на одной странице иметь один оступ а на другой, другой.
Вот еще пример:
Красными черточками обозначены отступы по 120.
Как бы вы тут организовали отступ между блоками, учитывая то что между всеми остальными блоками отступ 120, цвет сайта белый.
Если что-то не понятно, то спрашивайте, я уже сам запутался.
Дополнительно:
Чем быстрее вы примите тот факт, что универсального решения нет, тем быстрее полегчает.
Ответы:
Ну например margin-top:50px каждому "контейнерному" блоку в секции дать, либо же если там одинаковые отступы и допустим у них одинаковый контейнер по ширине то можно обернуть все это дело в контейнер display:flex , flex-direcrion: column; gap:50px то есть за счёт гэпа формировать отступ
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для указания разных отступов у секций с разными цветами и правильной организации расстояний можно использовать CSS.
Пример кода на языке CSS:
/* Секция с цветом фона и отступом */ .section1 { background-color: #f2f2f2; padding: 20px; /* отступ внутри секции */ margin-bottom: 20px; /* отступ снизу */ } /* Секция с другим цветом фона и отступом */ .section2 { background-color: #e6e6e6; padding: 15px; /* другой отступ внутри секции */ margin-bottom: 30px; /* другой отступ снизу */ }
В данном примере у секции с классом "section1" задан цвет фона, отступ внутри секции и отступ снизу. Аналогично у секции с классом "section2" задан другой цвет фона, другой отступ внутри секции и другой отступ снизу.
Чтобы применить эти стили к HTML элементам, добавьте соответствующие классы к секциям в вашем HTML коде:
<div class="section1"> <p>Содержимое секции 1</p> </div> <div class="section2"> <p>Содержимое секции 2</p> </div>
Таким образом, вы сможете организовать разные отступы и цвета фона для различных секций на вашем веб-сайте.