Почему в моем случае не работает margin-right?

Question

body {
  margin: 0;
  width: 300px;
}

/*.first_p {
    background: yellow;
  margin: -10% 0 0;
}

.second_p {
    background: pink;
  margin: 0;
}*/

.first_first {
  background: yellow;
  margin: 30px 10px 0px 0px;
  width: 300px;
}

.second_second {
  background: pink;
  margin: 0;
}

<!--<div class="one">
        <p class="first_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
    </div>
    <div class="two">
        <p class="second_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
    </div>-->

<div class="one_one">
  <p class="first_first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
</div>

<div class="two_two">
  <p class="second_second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
</div>

P.S. Левый марджин отлично работает

Answer 1

у вас body {width: 300px;} - учитывая что и блоки по 300px - негде выравниваться.
левый margin приоритетнее правого и 0 это не обнуление, а начало блока, т.е. его нужно поставить auto margin: 30px 10px 0px auto;

body {
  margin: 0;
}

/*.first_p {
    background: yellow;
  margin: -10% 0 0;
}

.second_p {
    background: pink;
  margin: 0;
}*/

.first_first {
  background: yellow;
  margin: 30px 10px 0px auto;
  width: 300px;
}

.second_second {
  background: pink;
  margin: 0;
}

<!--<div class="one">
        <p class="first_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
    </div>
    <div class="two">
        <p class="second_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
    </div>-->

<div class="one_one">
  <p class="first_first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
</div>

<div class="two_two">
  <p class="second_second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vel molestiae laudantium tempora obcaecati consectetur aliquid tenetur accusantium perferendis nam voluptates totam maxime, facere labore dicta consequuntur rerum officia harum.</p>
</div>

БЛОГ НА HUSL

Почему в моем случае не работает margin-right?

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