Для родительского («обёрточного») блока задано (рис. 1):
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
Когда окно обозревателя становится меньше заданной max-width, нужно, чтобы были отступы справа и слева (рис. 2).
Решения нашлись такие:
- задать padding/margin для body;
- задать ширину для родительского («обёрточного») блока менее 100% (например, 90%).
Возможно, есть ещё варианты?
{ border: 0 solid transparent; border-width: 0 40px; box-sizing: border-box; }
- что бы абсолютно спозиционированным элементам не надо было задавать разные отступы от краев для разных устройств (так как на мобильной обычно отсупые либо уменьшаются, либо вообще 0).width: calc(100vw - 80px);
position: absolute/fixed;
(хоть и необязательно), тогда выручает, если отступы именно у него, а не уbody