0

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

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

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

3
  • можно увеличить фото через transform: scale().
    – DiD
    11 янв 2021 в 15:32
  • @DiD можно, но там еще помимо фото есть и другие блоки, которые на весь экран должны идти. Наверное самое лучшее и безопасное решение это все-таки padding каждому эл-ту (можно через общий класс)
    – Eva
    11 янв 2021 в 15:35
  • Если нужно отступать только inline-элементам, можно сделать два невидимых блока float: left и float: right. Тогда можно обойтимь без padding.
    – DiD
    11 янв 2021 в 15:56

1 ответ 1

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, но стоит ли оно того, не скажу. Снова велосипед какой-то, который для обычных задач не нужен.

3
  • Ага, понятно. Похожее решение - добавление padding'ов к секции, а не к самому wrapper'у (результат получается точно такой же). Я так делала
    – Eva
    12 янв 2021 в 9:28
  • Такова быть не может, если только вы не сбросили стандартные отступы браузера в body. И НЕ нужно добавлять padding/margin секции. Это указывается блокам ниже, т.е ребенку.
    – WalkMess
    12 янв 2021 в 10:27
  • да, все отступы были обнулены
    – Eva
    12 янв 2021 в 10:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.