Как сделать внешний отступ внутренним?

Question

Что я имею в виду? Я хочу сделать один блок, в который я помещу все содержимое сайта. Этому блоку я задам правый и левый padding'и в 20рх. Таким образом при сжатии все содержимое сайта не будет прилипать к границам окна браузера.

Все бы хорошо, но не совсем выходит. На странице у меня есть фото на всю ширину окна браузера. При добавлении padding'ов с двух сторон, блок с фото уже не на всю ширину.

Как сделать так, чтоб отступ включал в себя размер всех блоков и был внутренним (надеюсь понятно)? Не сильно хочется каждому блоку на странице писать padding: 0 20px.

Answer 1

Нет, так не надо делать, пожалуйста не портите верстку и не изобретайте мопед.

Все на много проще и легче делается.

Вам необходимо научится не бояться важных классов, вроде как "wrapper". Алгоритм следующий:

Вы создаете секцию, только внутри нее *ВНУТРИ СЕЦИИ, А НЕ НА УРОВНЕ СЕКЦИИ задаете padding/margin , блок поверх wrapper может оставаться как для фона, так и для фоновой картинке. Самой фоновой картинке необходимо задать стили, которые помогут нормально встать ей на всю ширину/высоту экрана.

Я предоставлю код в html для более простого понимания:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <section class="header">
        <div class="header__body">
            <div class="wrapper">
                <h2 class="header__title title">header</h2>
            </div>
        </div>
    </section>
    <section class="nav">
        <div class="nav__body">
            <div class="wrapper">
                <h2 class="nav__title title">nav</h2>
            </div>
        </div>
    </section>
    <section class="footer">
        <div class="footer__body">
            <div class="wrapper">
                <h2 class="footer__title title">footer</h2>
            </div>
        </div>
    </section>
</body>

</html>

PS - Можно пойти через absolute, но тогда relative должен быть в не зоне padding, но стоит ли оно того, не скажу. Снова велосипед какой-то, который для обычных задач не нужен.

БЛОГ НА HUSL

Как сделать внешний отступ внутренним?

Ответы (1 шт):