本文介紹了css負邊距在普通文件流中的作用和效果、左和右的css負邊距對元素寬度的影響、css負邊距對浮動元素的影響、css負邊距對絕對定位元素的影響。懶人建站
那些沒有脫離文件流的元素（指不是浮動元素也不是絕對定位、固定定位的元素等），其在頁面中的位置是跟隨者文件流的變化而變化的。看下面這幅圖：
負 邊距對這些由文件流控制的元素的作用是，會使它們在文件流中的位置發生偏移，但這種偏移不同於相對定位，通過相對定位偏移後，其仍然會堅守著它原來佔據的 空間，不會讓文件流的其它元素乘虛而入。而通過負邊距進行偏移的元素，它會放棄偏移前佔據的空間，這樣它後面文件流中的其它元素就會「流」過來填充這部分 空間。還是通過例子來說明吧。現在我們把上圖中的塊狀元素、行內元素以及inline-block元素都設乙個負邊距 margin:-10px; 看看會發生什麼：
我們看到，黑灰色的塊狀元素好像向左和向上都分別嵌入了瀏覽器視窗的邊界裡10px,然後塊狀元素下面的文字也爬到了它身上，行內元素向左移動蓋住了它前面的乙個字，它後面的文字也有一部分覆蓋在了它身上，inline-block的位置變化也很明顯。
好 了，這點相信大家早就心知肚明了，就是負的邊距好像能減小元素在文件流中的尺寸一樣，但事實上，它的尺寸大小並沒變，只是文件流在計算元素位置的時候，會 認為負邊距把元素的尺寸減小了，因為位置也就發生變化了。這只是打個很形象的比喻，幫助大家理解一下。還要注意的是，文件流只能是後面的流向前面的，即文 檔流只能向左或向上流動，不能向下或向右移動。
所以，一切只要是由文件流決定的東西，負邊距就能起作用了。
比如，一 個沒有設定高度的塊狀元素，其高度是自動的，具體來說就是由它裡面的文件流最後的位置決定的。假設它裡面有乙個出於文件流中的子元素，高度為100px; 那這時這個父元素的高度就等於子元素的高度100px了，如果子元素繼續增高，那麼父元素也會跟著增高。可是如果這時子元素設乙個負的margin- bottom,比如-20px，因為負邊距會影響到文件流，本來文件流的高度是從父元素的最頂端到子元素的最底端這段高度，現在子元素有乙個 margin-bottom:-20px;就相當於文件流要向上退後20px,這樣整個文件流的高度就減少了20px了，那麼父元素的高度也會跟著減少 20px。在標準瀏覽器中，這還需要父元素擁有乙個overflow:hidden的屬性才能辦到，在ie瀏覽器中則不需要。所以以前所說的多列等高布局就是利用這個原理來實現的。懶人建站整理
總之一句話，在文件流中，元素的最終邊界是由margin決定的，margin為負的時候就相當於元素的邊界向裡收，文件流認的只是這個邊界，不會管你實際的尺寸是多少。
左和右的css負邊距對元素寬度的影響
負邊距不僅能影響元素在文件流中的位置，還能增加元素的寬度！
這個作用能實現的前提是：該元素沒有設定width屬性（當然width:auto是可以的）。
比如下圖的黑灰色部分是乙個塊狀元素，它沒有設定寬度。它被包裹在乙個寬度為400px,且水平居中的父元素中。
現在給這個元素的設乙個margin-right:-100px;
我們看到它的寬度的確變長100px;然後再給它設乙個margin-left:-100px;
我們看到它變得更寬了。
負的margin會改變元素的寬度，這的確很讓人費解，如果說負邊距會改變元素在文件流中的位置還是很好理解的話，那改變寬度這種現象還真的蠻讓人不可思議的。
那這貨有什麼用途呢？我就舉乙個例子吧。
想 要建立上圖中黑框內的幾個元素按順序排下來，中間帶些間隔的布局要怎麼做？，當然最簡單省事的方法就是利用浮動了。我們把黑框裡面的子元素向左浮動，然後 設乙個合適的margin-right,是不是就辦到了呢？但因為外邊黑框的寬度是固定的，就是裡面四個子元素的寬度加上三列間隔的寬度，所以靠近右邊邊 界的子元素就不應該有正向的margin-right了，否則這一行就只能容納三個子元素了。有人說那這還不簡單，給靠近右邊界的那些子元素加乙個 class，把它的margin-right設為0不就行了。這當然可以，但如果這些子元素是在模板中通過迴圈動態輸出的，那在迴圈的時候還得判斷哪些子 元素是靠近右邊邊界的，如果是就加上乙個class。這樣做的話是不是就有點麻煩了？所以解決辦法是加大子元素的父容器的寬度，讓它能夠容納一行中有四個 子元素加上四列間隔的寬度，然後最外面的的黑框的那個容器設乙個overflow:hidden就行了。上面說了負的左右邊距能加大元素的寬度，所以給子 元素的父容器設乙個合適的負的margin-right就可以了。當然你也可以直接在css中把子元素的父容器的寬度設寬一些，舉這個例子只是為了說明負 邊距也是一種方法。看下完整的**：
css負邊距對浮動元素的影響
負邊距對浮動元素的影響與負邊距對文件流中元素的影響其實是差不多的。文件流中元素的位置由文件流的走向決定，浮動的元素也可以看成有乙個「浮動流」存在，不過浮動流既可以向左，也可以向右。
比如下圖是三個向左浮動的元素，寬高都是100px：
現在把它們都設乙個margin-right:-50px; 然後會變成這樣子：
我們看到後面的元素疊到了前面的元素上。
再看下面的圖：
我們把瀏覽器縮小了，然後因為寬度不夠，元素3掉下來了。我們給元素3設乙個margin-left:-80px;看看會怎麼樣
這時我們看到元素3上去了，而且還覆蓋了元素2的一部分。繼續元素3設為margin-left:-100px
這時元素3完全覆蓋住了元素2,當元素3設為：margin-left:-200px時：
我們看到元素3繼續向左移動並覆蓋住了元素1。
現在想必大家都明白了負邊距對浮動元素位置的影響了吧。所以那些說得很好聽的什麼聖杯布局、雙飛翼布局啊什麼的，都是利用這個原理實現的。就是某個元素雖然是寫在了後面，但可以通過負邊距讓它在瀏覽器顯示的時候是在前面的。這個以後可以再慢慢講。
css負邊距對絕對定位元素的影響
css絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就 是margin定義的邊界，所以，如果margin為正的時候，那它的邊界是向外擴的，如果margin為負的時候，則它的邊界是向裡收的。利用這點，就 有了經典的利用絕對定位來居中的方法：
看下效果：
但該方法的缺點是必須要知道要居中元素的高度和寬度。
margin 負邊距應用
最外層寬度 340 100 20 100 20 100 23 24.pp 28 次外層寬度 360 29 30.p 34 每個寬度100 20 35 36.c 43style 44head 4546 body 47 div class pp 48 div class p clearfix 49 di...
譯 負邊距詳解
原文the definitive guide to using negative margins 自從1998年css2作為推薦以來，的使用漸漸退去，成為歷史。正因為此，從那以後css布局成為了優雅 的代名詞。我們都使用過css得外邊距，但是當談到負邊距的時候，我們好像往差的方向發展啦。在網頁設計中...
web開發 邊距屬性 margin
1.功能介紹 通過元素中的topmargin,leftmargin,rightmargin,bottommargin屬性設定頁面邊距，調整頁面顯示內容與瀏覽器邊框的距離，使內容顯得更加美觀。2.語法說明 topmargin 設定到頁面頂端的距離。leftmargin 設定到頁面左邊的距離。right...