Как сделать отступы от краёв окна обозревателя до содержимого сайта?

252
05 сентября 2017, 08:32

Для родительского («обёрточного») блока задано (рис. 1):

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

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

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

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

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

Answer 1

.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>

Answer 2
width: 90%;
max-width: 800px;
margin: auto;
READ ALSO
Выбор и структура классов по БЭМ
HTML

Выбор и структура классов по БЭМ

Пытаюсь правильно выбрать классы по БЭМ + что бы не было каскадности в cssДля css использую stylus, так что могу писать конструкции типа:

 287
Нижняя часть страницы не видна на телефоне
HTML

Нижняя часть страницы не видна на телефоне

Доброй ночиНижняя часть данной страницы: http://victory-factory

 285
Меню в мобильной версии, скролл по странице
HTML

Меню в мобильной версии, скролл по странице

Доброй ночи!

 394
loremru для webstorm
HTML

loremru для webstorm

Необходим аналог loremN, где N - число случайных словПрочитал документацию на сайте jetbrains по составлению live templates, потыкал методы, в итоге не нашёл...

 289