Почему отрицательное правое поле не работает?

Так как край элемента с margin-left: -10px пересекает край его родителя, почему это не происходит с margin-right: -10px?

пример

div {
  background: red;
  width: 200px;
  height: 100px;
}

p {
  background: blue;
  width: 100%;
}

.left {
  margin-left: -10px;
}

.right {
  margin-right: -10px;
}

<div>
  <p class="left">Hello</p>
</div>
<div>
  <p class="right">Hello</p>
</div>

Ответы

Ответ 1

Хорошей новостью является то, что отрицательные поля работают!

Чтобы увидеть отрицательные поля на работе, рассмотрите следующий фрагмент кода:

.wrapper {
  outline: 1px solid blue;
  padding: 40px;
}

.content {
  outline: 1px solid red;
  background-color: #D8D8D8;
}

.content p {
  outline: 1px dotted blue;
  background-color: rgba(255, 255, 0, 0.3);
  margin: 0 0 0 0;
  text-align: justify;
}

.content p.lefty {
  margin-left: -20px;
}

.content p.righty {
  margin-right: -20px;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, ...</p>
    <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p>
    <p class="righty">Curabitur aliquam tristique mattis...</p>
  </div>
</div>

Ответ 2

Это потому, что элементы выложены слева направо по умолчанию не справа налево. Вы можете увидеть противоположный эффект, если вы float <p> вправо.

jsFiddle

.right {
    margin-right: -10px;
    float:right;
}

Ответ 3

Просто измените этот css:

p {
    background: blue;
    width: 100%;
}

p {
    background: blue;
    display: block;
}

Здесь демо: http://jsfiddle.net/pVKNz/

Если вы хотите сделать похожими на перемещаемые элементы, используйте этот css:

.left {
    margin-left: -10px;
    margin-right:10px;
}

.right {
    margin-right: -10px;
    margin-left:10px;
}