做乙個效果
.head
.head .logo
但實際如下
我擦，這是搞啥鬼，子類沒有效果，父類向下偏移了，這是啥原因呢？
這是因為父元素和子元素的margin發生了和並，父元素的margin是0px，子元素的margin是10px，所以合併後的margin是10px，且加在了父元素上，於是出現了圖2的效果。在css2.1中對盒模型有如下規定：在垂直方向上，所有毗鄰的兩個或多個盒元素的margin將會合併。毗鄰的意思是：同級或巢狀的盒元素，並且它們之間沒有非空內容、padding或border。
合併後的margin的大小取兩個發生合併的元素中margin較大的那乙個。
更詳細的講，分為幾種情況：
1.兩個元素為同級元素，即當乙個元素出現在另乙個元素上面時，第乙個元素的margin-bottom與第二個元素的margin-top發生合併，合併後的margin值是margin-bottom和margin-top中較大的那乙個
2.當兩個元素巢狀，即乙個元素包含在另乙個元素中時（假設沒有padding或border把兩個元素的margin分隔開），它們的margin-bottom和/或margin-top也會發生合併，合併後的margin值同樣也是margin-bottom和margin-top中較大的那乙個；該問題就屬於這一種情況。
3.假設有乙個空元素，且不設定它的寬高，它有margin-bottom和margin-top，但是沒有padding或border。在這種情況下，margin-bottom和margin-top就碰到了一起，它們也會發生合併，合併後的margin值同樣也是margin-bottom和margin-top中較大的那乙個。
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併。
1.在父元素上設定overflow：hidden； （觸發父元素的bfc）
2.給父元素設定padding或border（隔開兩個元素的margin）
3.父元素或子元素使用浮動或者絕對定位（浮動或絕對定位不參與margin的摺疊）
CSS span元素margin top無效的根源
span預設是行屬性，而div預設是塊屬性。對行內元素 不包括可替換元素如img等 1.設定寬度width 無效。2.設定高度height無效，可以通過line height來設定高度。3.設定margin只有左右margin有效，上下無效。這就是span的margin top無效的原因 4.設定p...
margin top無效的解決方法
為什麼會出現margin top無效？原因 根據w3c盒子模型的規範，乙個盒子如果沒有上補白 padding top 和上邊框 border top 那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。解決該問題的辦法 1.在父元素加上有意義的border數值 0，none無效 2.用...
關於內層標籤margin top無效的問題
最近在頁面布局的時候遇到了這麼乙個問題 charset utf 8 title type text css header header logo lg style head class logo href id logo lg 我是內層div div header body html 如下圖，設定了...