margin屬性的正負值確定，margin屬性負值

margin屬性的正負值確定，margin屬性負值
      margin屬性用來使用設定外邊距，大多數情況使用正值，但是一些稍複雜的定位就會使用到負值，所以對margin屬性的正負值理解是有必要的，本文同時解釋了margin-right和margin-bottom沒有效果的原因以及解決方案。1、“margin-left”屬性

margin-left屬性設定元素的左邊距。

記憶方式一：以“元素原來位置的左邊”為零界線，向右移動為正值，向左移動為負值。

記憶方式二：以“其他元素（即元素想要拉開距離的外元素）的邊緣”為零界線，元素的左邊與零界線拉開距離為正；元素左邊超出零界線為負。

例子如下：

2、“margin-right”屬性

margin-right屬性設定元素的右邊距。

注意：直接使用margin-right屬性一般不會有任何效果，這是因為瀏覽器預設從左往右渲染元素，在沒有超出父容器的寬度的前提下， 如果子容器的寬度能夠被容納 ，設定margin-right是沒有用的。

解決：要使margin-right有用，就必須使用定位屬性（position）或者浮動屬性（float）為前提。

這裡使用position為例，先將父元素設定相對定位position：relative，再將測試元素設定絕對位置position：absolute，right：0px。

記憶方式一：以“元素原來位置的右邊”（這裡指已經定位好，前提設定好的位置）為零界線，向左移動為正值，向右移動為負值。

記憶方式二：以“其他元素（即元素想要拉開距離的外元素）的邊緣”為零界線，元素的右邊與零界線拉開距離為正；元素右邊超出零界線為負。

例子如下：

3、“margin-top”屬性

margin-top屬性設定元素的上邊距。

記憶方式一：以“元素原來位置的上邊”為零界線，向下移動為正值，向上移動為負值。

記憶方式二：以“其他元素（即元素想要拉開距離的外元素）的邊緣”為零界線，元素的上邊與零界線拉開距離為正；元素上邊超出零界線為負。

例子如下：

4、“margin-bottom”屬性

margin-bottom屬性設定元素的下邊距。

注意：直接使用margin-bottom屬性一般不會有任何效果，這是因為瀏覽器預設從上往下渲染元素，在沒有超出父容器的高度的前提下， 如果子容器的高度能夠被容納 ，設定margin-bottom是沒有用的。

解決：要使margin-bottom有用，就必須使用定位屬性（position）或者浮動屬性（float）為前提。

這裡使用position為例，先將父元素設定相對定位position：relative，再將測試元素設定絕對位置position：absolute，bottom：0px。

記憶方式一：以“元素原來位置的下邊”（這裡指已經定位好，前提設定好的位置）為零界線，向上移動為正值，向下移動為負值。

記憶方式二：以“其他元素（即元素想要拉開距離的外元素）的邊緣”為零界線，元素的下邊與零界線拉開距離為正；元素下邊超出零界線為負。

例子如下：

總結：

以“元素原來位置的邊”為零界線（margin-left以左邊，margin-right以右邊，margin-top以上邊，margin-bottom以下邊），向邊的相反方向移動為正值，向邊的同向方向移動為負值。舉例：margin-left，以“元素原來位置的左邊”為零界線，向右移動為正值，向左移動為負值。