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為負值畫素，偏移值相對於自身，其後元素不受影響，見如下**：
1效果：2 333 34 35 36 子元素1
37
38 39 子元素2（子元素2不受影響）
40
41
42 43
3、margin-top為負值百分數
margin-top為負值百分數，偏移值相對于父元素，其後元素受影響，見如下**：
1效果：2 333 34 35 36 子元素1
37
38 39 子元素2（子元素2受影響）
40
41
42 43
4、margin-left為負值百分數
margin-left為負值百分數，偏移值相對于父元素，其後元素不受影響，見如下**：
1效果：2 333 34 35 36 子元素1
37
38 39 子元素2（子元素2不受影響）
40
41
42 43
5、margin-right為負值畫素且不設定寬度
margin-right為負值畫素且不設定寬度，無偏移值，其後元素不受影響，自身寬度變大,見如下**：
1效果：2 334 35 36 37 子元素1
38
39 40 子元素2（子元素2不受影響）
41
42
43 44
6、margin-right為負值百分數且不設定寬度
margin-right為負值百分數且不設定寬度，無偏移值,自身寬度變寬(寬度值為父元素寬度值*百分比)，其後元素不受影響，見如下**：
1效果：2 334 35 36 37 子元素1
38
39 40 子元素2（子元素2不受影響）
41
42
43 44
7、margin-bottom:為負值畫素
margin-bottom:為負值畫素，自身無偏移值,，其後元素受影響(上移了)，見如下**：
1效果：2 333 34 35 36 子元素1
37
38 39 子元素2（子元素2受影響,上移了）
40
41
42 43
8、margin-bottom:為負值百分數
margin-bottom:為負值百分數，自身無偏移值,，其後元素受影響(上移了,上移大小為父元素寬度值*20%)，見如下**：
1效果：2 333 34 35 36 子元素1
37
38 39 子元素2（子元素2受影響,上移了）
40
41
42 43
總結：以上是margin賦值為負值的情況，可使自身偏移（或不偏移），其後元素受影響（或不受影響），自身寬度增大（或不增大），會有多種不同的應用場景，請合理選擇。 margin負值的應用總結
margin負值 之前一直 應用都是定位 和 列表的時候，從來沒有想著進行個總結，直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章，加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...
margin屬性的正負值確定
margin left屬性設定元素的左邊距。記憶方式一 以 元素原來位置的左邊 為零界線，向右移動為正值，向左移動為負值。記憶方式二 以 其他元素 即元素想要拉開距離的外元素 的邊緣 為零界線，元素的左邊與零界線拉開距離為正 元素左邊超出零界線為負。例子如下 margin right屬性設定元素的右...
（負值） margin在頁面布局中的應用
此例適用於左右欄寬度固定，中間欄寬度自適應的布局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種布局剛好滿足此需求。專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設定一定的間距 margin right 當父元素的寬度固定式，每一行的最右端的li元素的右邊距就多餘了...