1

Имеется некий блок расположенный по центру, при прописывании '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

введите сюда описание изображения

4
  • 1
    потому что margin + width > 100%. Используйте padding
    – soledar10
    17 фев 2021 в 5:06
  • @soledar10 но при использовании padding отступы задаются изнутри, а не внешние
    – O_zeilo
    17 фев 2021 в 5:13
  • 1
    У вас получается сейчас 50px + 50px + 100% > 100%. Пример jsfiddle.net/053re8ta
    – soledar10
    17 фев 2021 в 5:59
  • @soledar10 ок, понял, если в таком случае требуется использовать padding-и, то к какому элементу их применять?
    – O_zeilo
    17 фев 2021 в 6:53

1 ответ 1

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>

Ваш ответ

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

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