1. .wrap {       float: left;   
2.    border: 2px solid #000;     }   
3. .item1 {       width: 100px;   
4.    height: 100px;       background: #fdf;   
5.    margin-left: 10px;       margin-top: 10px;   
6.    margin-right: 20px;       margin-bottom: 30px;   
7. }    item2 {   
8.    width: 50px;       height: 50px;   
9.    background: #adf;    }  

能滿足原理1的條件只有一種，元素不設寬度且不在文檔流中，此時，父元素wrap產生的containing-box的寬高寬度等子元素border-box的寬高度加上外邊距的寬高度，也就是說，子元素的margin值也是其containing-box的一部分。margin一共有兩類參考線，第一類是margin-top與margin-left的參考線,第二類是margin-bottom與margin-right的參考線,第一類margin的參考線是以其所處的containing-box的邊緣線為參考線,如上例所示,當調整元素.item1的margin-top與margin-left的值時,元素.item1所處的containing-box的大小也在發生變化因此其邊緣線也在不斷變化同時也就導致.item1元素自身的位置也在發生變化,看起來就是.item1自身發生了移動。第二類margin的參考線是以元素自身的邊緣線(外邊距的外側為邊緣線)為參考線,同樣的,調整上例中的margin-bottom值,.item1的margin-bottom也在不斷的發生變化,也就是說其自身邊緣線在不斷的移動,同時導致了.item2的移動。根據上面的論述,我們可以得出結論,外邊距的調整也就等于讓其自身相對的參考線的位置在發生移動,同時導致相對于參考線運動的元素發生移動。元素自身相對于containing-box的邊緣線移動而移動,與元素自身為兄弟關系的元素相對于元素自身的邊緣線移動而移動。參考線示意圖如圖所示,按箭頭所指方向使參考線變化的margin值都為正值。