margin-left屬性設定元素的左邊距。
記憶方式一：以「元素原來位置的左邊」為零界線，向右移動為正值，向左移動為負值。
記憶方式二：以「其他元素（即元素想要拉開距離的外元素）的邊緣」為零界線，元素的左邊與零界線拉開距離為正；元素左邊超出零界線為負。
例子如下：
margin-right屬性設定元素的右邊距。
注意：直接使用margin-right屬性一般不會有任何效果，這是因為瀏覽器預設從左往右渲染元素，在沒有超出父容器的寬度的前提下， 如果子容器的寬度能夠被容納 ，設定margin-right是沒有用的。
解決：要使margin-right有用，就必須使用定位屬性
（position）或者浮動屬性（float）為前提。
這裡使用position為例，先將父元素設定相對定位position：relative，再將測試元素設定絕對定位position：absolute，right：0px。
記憶方式一：以「元素原來位置的右邊」（這裡指已經定位好，前提設定好的位置）為零界線，向左移動為正值，向右移動為負值。
記憶方式二：以「其他元素（即元素想要拉開距離的外元素）的邊緣」為零界線，元素的右邊與零界線拉開距離為正；元素右邊超出零界線為負。
例子如下：
margin-top屬性設定元素的上邊距。
記憶方式一：以「元素原來位置的上邊」為零界線，向下移動為正值，向上移動為負值。
記憶方式二：以「其他元素（即元素想要拉開距離的外元素）的邊緣」為零界線，元素的上邊與零界線拉開距離為正；元素上邊超出零界線為負。
例子如下：
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，以「元素原來位置的左邊」為零界線，向右移動為正值，向左移動為負值。
margin負值的應用總結
margin負值 之前一直 應用都是定位 和 列表的時候，從來沒有想著進行個總結，直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章，加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...
margin為負值的幾種情況
1 margin top為負值畫素 margin top為負值畫素，偏移值相對於自身，其後元素受影響，見如下 1 2 333 34 35 36 子元素1 37 38 39 子元素2 元素2跟著上移了 40 41 42 43 效果 2 margin left為負值畫素 margin left為負值畫素...
（負值） margin在頁面布局中的應用
此例適用於左右欄寬度固定，中間欄寬度自適應的布局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種布局剛好滿足此需求。專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設定一定的間距 margin right 當父元素的寬度固定式，每一行的最右端的li元素的右邊距就多餘了...