出現這個問題基本和垂直外邊距的特性有關。注意是垂直外邊距margin-top/bottom啊，不是水平外邊距。
垂直外邊距特性：
1.兄弟盒子的垂直外邊距會重合，取兄弟元素設定的margin屬性最大值。比如上面的盒子設定margin-bottom:200px，下面盒子設定margin-top:100px，那最終兩個盒子隔開距離是200px。
2.父子盒子的垂直外邊距會傳遞，在一定的條件下，由子元素margin-top屬性會單方向傳遞給父元素的margin-top屬性。
下面會進行實驗，看看margin具體是怎麼無效的。看一下實驗場景：
"box1">
"box1-1">
"box2">
"box3">
"box4">
渲染出的頁面：
然後我們想把橙色盒子和紫色盒子隔開一些。於是對紫色盒子設定margin-top：200px屬性。
設定以後，確實紫色盒子和橙色盒子隔開了200px；
但當我們設定橙色盒子margin-bottom:100px;後，發現橙色和紫色盒子垂直距離沒有變化，也就是發生了無效的情況。按文章開頭提到的特性，此時只有紫色盒子的margin-top:200px;生效。
解決方案：無需解決，只需要記住規律就可以。實在有強迫症可以把無效的屬性刪除，比如上面的刪除橙色盒子的margin-bottom:100px;
簡單說一下父子盒子的關係。父子盒子也叫父子元素，盒子也就是div是html元素的一種，我比較喜歡把單純的div標籤元素稱為盒子。然後乙個a盒子裡面放乙個盒子b，那a就是b的爹。
實驗場景中，我在橙色盒子裡放乙個藍色盒子。現在我想把藍色盒子在橙色盒子裡往下移一點，也就是這樣：
於是乎首先想到的是設定藍色盒子margin-top:50px;
但實際是橙色盒子往下移動了50px，藍色盒子在橙色盒子內沒有移動，margin-top不生效。
解決方法：
1.給父盒子加乙個邊框屬性border-style:solid;
然後把邊框顏色變透明：border-color:rgba(0,0,0,0);
但有***，那就是父子盒子之間會隔開距離，距離為邊框的預設寬度3px（因為我沒有設定邊框寬度，所以是3px），如圖所示（仔細看，藍色和橙色之間有微小縫隙）：
當然你也可以只設定border-top-style，這不會影響水平。但橙色盒子同樣會受到邊框的影響，被拉長了3px，當然這在邏輯上很好解決，把高度減少相應的數值就可以。甚至如果你的網頁不需要很嚴謹的顯示效果，這個方法值得採用的，在邏輯上容易理解，而且把布局改動侷限在一小塊地方。因為css理念就是通過擺放div來調整網頁結構，就像實體的物理建築一樣。說到這個，你甚至可以再拿乙個50px高的盒子像乙個柱子一樣放在藍色盒子和橙色盒子之間，撐開他們的距離，但橙色盒子高度也要相應減少50px。
2.不對子盒子使用margin-top屬性，對父盒子使用padding-top屬性。這個方法同樣有***，那就是橙色盒子高度被多撐開了50px，是從padding-top的50px那來的。如圖所示：
padding-top多出來的50px，在父盒子高度height屬性那減去50px抵消就可以。
以上兩種方法都是從結構來使得藍色盒子在橙色盒子裡往下移動，下面說說其他方法是怎麼做的
3.相對定位。
.box1-1
.box1-1
截圖，刪**換情況，組織語言，寫了好久。。。如果這篇文件幫到您，可以點讚支援一下作者，非常感謝(_
)
web前端網頁設計作業 如何學習網頁前端設計培訓？
學習網頁的前端設計分為幾個步驟或者說幾個網頁設計教程大類。乙個是熟練掌握各種網頁設計需要的操作軟體，然後就是web介面設計與專案設計，最後還有web整站設計實訓。如何學習網頁的前端設計呢？許多零基礎的學員想要從事網頁設計或者網頁前端的工作，想要成為一名網頁設計師都不知道從何學起。非凡教育的特色課程專...
css網頁設計標準教程 CSS設計教程
css網頁設計標準教程 veerle pieters發布了乙個名為 設計css模板 的教程系列，它對許多現有教程進行了令人耳目一新的更改，首先集中於設計，最後只討論了使用css的實現。它分為四個部分 第1 部分 第2 部分 第3 部分 第4部分 而設計的來講，我碰到乙個很好的例子，今天的新鮮css設...
《網頁程式設計》學習筆記之一
示例1 示例2 這會是一種很有趣的體驗 示例3 這會是一種有趣的體驗 另乙個段落元素 示例4 這會是一種有趣的 體驗另乙個段落元素 示例5 這會是一種有趣的體驗 示例6 doc1.html 本頁的所有內容都講述關於如何建立到文件的鏈結 單擊此處檢視文件 2 示例7 doc2.html 這是文件2。單...