@Drovosek01

Как сделать «динамический» padding или как избавиться от обёртки?

Есть вот такая вёрстка: https://codepen.io/Drovosek/pen/RYXqKd

В ней в body есть контейнеры для контента и в них еще одни контейнеры в которых находится сам контент.

<body>
    <div class="main__content">
        <div class="container">
            <!-- контент -->
        </div>
    </div>
    <div class="main__content">
        <div class="container">
            <!-- контент -->
        </div>
    </div>
    <div class="main__content">
        <div class="container">
            <!-- контент -->
        </div>
    </div>
</body>


Блоку container я задаю определенный max-width и margin: auto, чтобы всё было по центру.

Вопросы:
1. Влияет ли вложенность на что-то, кроме количества кода? Ну типо для поисковых машин, для СЕО это насколько плохо? Например, если я сделаю так:

<body>
    <div class="main__content">
        <div class="container1">
            <div class="container2">
                <div class="container3">
                    <div class="container4">
                        <!-- контент -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main__content">
        <div class="container1">
            <div class="container2">
                <div class="container3">
                    <div class="container4">
                        <!-- контент -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main__content">
        <div class="container1">
            <div class="container2">
                <div class="container3">
                    <div class="container4">
                        <!-- контент -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


2. Можно ли избежать блока container в первом примере и поместить весь контент в блок main__contant, но при этом чтобы результат был как с блоком container, т.е. контент так же оставался по центру и не растягивался? Типо чтобы были динамические padding'и
(Вот тот же пример только без container, с padding'ами и контент естественно теперь растягивается: https://codepen.io/Drovosek/pen/RYXeWL )
  • Вопрос задан
  • 269 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
В вашем примере дополнительная обертка не нужна
https://codepen.io/anon/pen/dgbbNW

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

Альтернатива это calc и media условие на 500 точках (или на 500 + запас на отступы)
https://codepen.io/anon/pen/KGPOmX
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы