margin

1、參數個數

2個：上下 左右

margin:10px 5px;

3個：上 左右 下

margin:10px 5px 15px;

4個：上 右 下 左

margin:10px 5px 15px 20px;

 

2、auto值的含義

margin-left:auto;——靠最右側顯示，不管怎麼調整窗口大小

margin-right:auto;——靠最左側顯示，不管怎麼調整窗口大小

margin:0 auto;——居中顯示，不管怎麼調整窗口大小

 

3、常見問題

一、元素之間的上下外邊距會疊壓

描述：上下外邊距都是30px，只會有一個30px不會變成60px

取值規則：選取margin-top或者margin-bottom裏最大的一個值

#box1{width:500px; height:300px; background:blue;margin-bottom:30px;}
#box2{width:300px; height:100px; background:yellow; margin-top:30px;}

<div id="box1"></div>
<div id="box2"></div>

解決辦法1：將其中某個元素的margin-top / margin-bottom的值設置爲2倍margin-top / margin-bottom的值

解決辦法2：若是元素之間沒有什麼特殊特徵，能夠用padding代替

 

二、子級的margin-top會傳遞給父級

問題描述：給黃色的div添加margin-top會變成給藍色的div添加的，子元素的margin會傳遞給父級

問題寫法：

#box1{width:500px; height:300px; background:blue; }
#box2{width:300px; height:100px; background:yellow;margin-top:100px;}

<div id="box1">
    <div id="box2"></div>
</div>

解決辦法1：

描述：給父元素加padding-top替換給子元素添加margin-top，父元素的高度會被padding撐開，再把父元素的高度減去padding

#box1{width:500px; height:200px; background:blue; padding-top:100px;}  //hight從300px變爲200px，父元素加了padding-top
#box2{width:300px; height:100px; background:yellow;}

解決辦法2：

描述：給父級加上1px的邊框