3

Как сделать отступы от краёв окна обозревателя до содержимого сайта? Для родительского («обёрточного») блока задано (рис. 1):

width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;

Когда окно обозревателя становится меньше заданной max-width, нужно, чтобы были отступы справа и слева (рис. 2).

Решения нашлись такие:

  1. задать padding/margin для body;
  2. задать ширину для родительского («обёрточного») блока менее 100% (например, 90%).

Возможно, есть ещё варианты?

7
  • обычно делают через { border: 0 solid transparent; border-width: 0 40px; box-sizing: border-box; } - что бы абсолютно спозиционированным элементам не надо было задавать разные отступы от краев для разных устройств (так как на мобильной обычно отсупые либо уменьшаются, либо вообще 0). 3 сен 2017 в 17:11
  • можно ещё так width: calc(100vw - 80px); 3 сен 2017 в 17:12
  • А вариант с padding/margin для body имеет место быть? Или так не делают?
    – eav
    3 сен 2017 в 19:49
  • Имеет место, просто я обычно в своей практике использую именно отступы самого .content-wrapper'a, как к этому пришел, честно говоря сейчас и не вспомню. 3 сен 2017 в 19:52
  • а, вспомнил как. Иногда приходится использовать .content-wrapper с position: absolute/fixed; (хоть и необязательно), тогда выручает, если отступы именно у него, а не у body 3 сен 2017 в 19:56

2 ответа 2

2

.block {
  width: 100%;
  border: 0 solid transparent;
  border-width: 0 40px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

.block-2 {
  width: calc(100% - 80px);
  margin: 0 auto 20px;
}

.block_inner {
  height: 40px;
  background-color: green;
}
<div class="block">
  <div class="block_inner"></div>
</div>
<div class="block-2">
  <div class="block_inner"></div>
</div>

0
width: 90%;
max-width: 800px;
margin: auto;
6
  • 1
    Ожидал от тебя фееричного способа, но по моему это то же самое, что описал автор в пункте 2 3 сен 2017 в 17:28
  • @MedvedevDev, разница в 90% вместо 100%. Если я правильно понял вопрос, то у него проблема в том, что при минимальной ширине полей нет.
    – Qwertiy
    3 сен 2017 в 17:36
  • "задать ширину для родительского («обёрточного») блока менее 100% (например, 90%)" - это цитата из вопроса. 3 сен 2017 в 17:36
  • @MedvedevDev, да, понял. Как всегда невнимательно читаю вопрос...
    – Qwertiy
    3 сен 2017 в 17:37
  • главное, что ваши вкусы на счет кол-ва процентов совпали xDDD 3 сен 2017 в 17:37

Ваш ответ

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

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