如何理解margin值為負
阿新 • • 發佈：2019-01-26
通常來說margin為正值時，我們很清楚其佈局形式，即在border邊界線處再往外擴充套件指定長短。可margin為負又表示什麼呢，表示始於border邊界線處並向內擴充套件指定長短，這樣，下一個文件流物件便是從margin邊界線處起，顯示出來。程式碼示例：
<div style="margin-right:-100px; background-color:#CCCCCC; width:200px;">1</div>
此時有一個margin邊界線我們看不到，其位置是在border邊界線向內100px處，即200-100=100px處。
我們看，此時由於兩個div標籤為塊級元素，故不涉及到右margin邊界線，兩個物件完全顯示出其定義的長度和寬度。<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px;"></div> <div style="width:150px; float:left; background-color:#0033CC; height:100px;">
<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px; float:left;"></div>
<div style="width:150px; float:left; background-color:#0033CC; height:100px;">此時由於float：left作用，兩個塊級元素顯示到了一行內，第二個div標籤的起始處便是右margin邊界，即100px處，而非border邊界處200px處。
