CSS 之 margin 負值的內涵

一個還蠻有意思的差異。

關於 margin 負值

margin 負值雖然不是個太複雜的概念，但它其實蠻藏著一些小陷阱。

舉例來說，你可能知道 margin 負值可以把某個元素往反方向移動，但如果我現在告訴你：margin-left: -20px 跟 margin-right: -20px 其實有差異的，你能說出是哪個地方有差異嗎？

這是我在 stackoverflow 找到的資料：

left and right negative margins don’t behave the same : negative margin-left pulls the styled element towards the left, while negative margin-right pulls the adjacent right element towards the styled element. It doesn’t move the styled element itself.

簡單來說：

• margin-left 負值：把元素自己往左邊拉。
• margin-right 負值 : 把元素右邊的元素往自己這邊拉（元素自己不會移動）。

我們來試試看：

<section class="left">
  <h2>margin-left 負值</h2>
  <div class="target">Target</div>
  <div></div>
</section>

<section class="right">
  <h2>margin-right 負值</h2>
  <div class="target">Target</div>
  <div></div>
</section>

section {
  width: 500px;
  margin: 100px auto;
  font-family: sans-serif;
  border: 1px solid #000;
}
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;
  vertical-align: middle;
  line-height: 100px;
  text-align: center;
}
div.target {
  background-color: pink;
}
/* 重點是這邊，其他不重要 */
.left .target {
  margin-left: -50px;
}
.right .target {
  margin-right: -50px;
}

結果：