Использование margin смещает объект в одну сторону

Question

Имеется некий блок расположенный по центру, при прописывании 'margin: 0 50px', margin применяется к обеим сторонам, но при этом блок смещается вправо, а не остается на месте(как будто был задан только margin-left: 50px). При уменьшении размера экрана, действие margin-а применяется только к левой стороне(видно на картинке). В стилях ко всем элементам прописано:

*
    box-sizing: border-box
    margin: 0
    padding: 0

Стили блока(хотя проблема с margin-ом связана с любым элементом на странице):

    .block
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        background-color: $white
        width: 100%
        max-width: 960px
        margin: 0 50px

Answer 1

У вас так получается, потому что при суммировании ширины блока width: 100%; и отступов margin: 0 50px;, в общей сложности ширина получается: 100% + 100px.

В этом случае ширину блока следует указать так:

width: calc(100% - 100px);

Таким образом вы отнимаете отступы margin: 0 50px;.

Про свойство calc можно почитать здесь.

Вот пример:

* {box-sizing: border-box; margin: 0; padding: 0;}

body {background: lightgray;}

.block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: calc(100% - 100px);
  max-width: 960px;
  margin: 0 50px;
}

<div class="block">
  <p>Стихи Пушкина – это богатейшее культурное наследие, подаренное миру. Всю жизнь он занимался тем, что обращал чувства в строки. Александр Сергеевич был невероятно талантливым человеком. Диапазон тем, которые он отображал в стихах, поражает своей широтой. Добрые и глубокомысленные сказки для детей, саркастичные эпиграммы, нежные стихи о любви, о верной дружбе, веселье и вине, самоироничные строчки о себе и о своем творчестве.</p>
  <p>Не обошел стороной он и государственные события: писал о войне, о Родине, о России.</p>
</div>

Хотя, возможно, я не совсем верно понял задачу. Может быть нужно позиционировать блок таким образом?

* {box-sizing: border-box; margin: 0; padding: 0;}

body {background: lightgray;}

.block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 50px), -50%);
  background-color: white;
  width: 100%;
  max-width: 960px;
  margin: 0 50px;
}

<div class="block">
  <p>Стихи Пушкина – это богатейшее культурное наследие, подаренное миру. Всю жизнь он занимался тем, что обращал чувства в строки. Александр Сергеевич был невероятно талантливым человеком. Диапазон тем, которые он отображал в стихах, поражает своей широтой. Добрые и глубокомысленные сказки для детей, саркастичные эпиграммы, нежные стихи о любви, о верной дружбе, веселье и вине, самоироничные строчки о себе и о своем творчестве.</p>
  <p>Не обошел стороной он и государственные события: писал о войне, о Родине, о России.</p>
</div>

БЛОГ НА HUSL

Использование margin смещает объект в одну сторону

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