margin

一、参数个数

2个：上下 左右

margin:10px 5px;

3个：上 左右 下

margin:10px 5px 15px;

4个：上 右 下 左

margin:10px 5px 15px 20px;

 

二、auto值的含义

margin-left:auto;——靠最右侧显示，无论怎么调整窗口大小

margin-right:auto;——靠最左侧显示，无论怎么调整窗口大小

margin:0 auto;——居中显示，无论怎么调整窗口大小

 

三、常见问题

1、元素之间的上下外边距会叠压

描述：上下外边距都是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代替

 

2、子级的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的边框