CSS中margin-top對父級元素產生作用的問題
阿新 • • 發佈：2019-01-05
在頁面重構中，利用margin進行定位非常常見，然而margin-top這個屬性經常會給我們帶來一定的困擾，有時候不起作用，還把父層“拉”了下來，如圖所示：
程式碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
.header { width:300px; height:100px; background: green; }
.outer { width:300 這是在做佈局時的一個經典問題。那這個問題是怎麼產生的呢？主要是合併margin的問題，紅色層（子層）的margin-top與黃色層（父層）相合並，產生了共同的margin-top。其實合併margin還有其他的形式，比如說：
- 父層的margin-top與一系列子層中第一個層的margin-top合併
- 上層的margin-bottom與下層的margin-top合併，此時margin值為合併margin值中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值
- 層高為0時，自身的margin-top和margin-bottom合併
那如何解決這個問題呢，w3.org給出了思路：
- 一個浮動的盒與任何其它盒之間的margin不會合並（甚至一個浮動盒與它的流內子級之間也不會）
- 建立了新的塊格式化上下文的元素（例如，浮動盒與’overflow’不為’visible’的元素）的margin不會與它們的流內子級合併
- 絕對定位的盒的margin不會合並（甚至與它們的流內子級也不會）
- 內聯盒的margin不會合並（甚至與它們的流內子級也不會）
- 一個流內塊級元素的bottom margin總會與它的下一個流內塊級兄弟的top margin合併，除非兄弟有空隙
- 一個流內塊級元素的top margin會與它的第一個流內塊級子級的top margin合併，如果該元素沒有top border，沒有top padding並且該子級沒有空隙
- 一個’height’為’auto’並且’min-height’為0的流內塊級盒的bottom margin會與它的最後一個流內塊級子級的bottom margin合併，如果該盒沒有bottom padding並且沒有bottom border並且子級的bottom margin不與有空隙的top margin合併
- 盒自身的margin也會合並，如果’min-height’屬性為0，並且既沒有top或者bottom border也沒有top或者bottom padding，並且其’height’為0或者’auto’，並且不含行盒，並且其所有流內子級的margin（如果有的話）都合併了
簡單的來講，就是
- 都用float來定位（有條件要求，適用範圍較廣）
- 為父元素新增overflow不為visiable 的屬性 （適用範圍極廣，推薦使用）
- 為元素新增border（一般不用）
- 使用絕對定位（適用範圍較窄）
- 父元素增加padding-top屬性（改變尺寸，不建議使用）
然鵝我在用margin-top的時候又發現一個問題： 在上一個層有clear屬性的時候margin-top不起作用，應該還是margin合併的問題，但是具體原因我沒有分析清楚，只提供幾個解決方案，供大家參考：
- 中間加一個層
<div style=”clear:both”></div> - 設定上一個層的margin-bottom來代替下一個層的margin-top
- 使用包裹層，並設定上下層都用float:left;
- 使用絕對定位
- 全部加上border