margin的四个方向
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距
margin的复合样式
一个值 四个方向的margin值都一样
两个值 第一个值代表上边和下边的margin值，第二个值代表右边与左边的margin值
三个值 第一个值代表上边的margin值，第二值代表右边与左边的margin值，第三个值代表下边的margin值
四个值 第一个值代表上边的margin值，第二个值代表右边的margin值，第三个值代表下边的margin值，第四个值代表左边的margin值
margin的问题
margin的问题
1、margin的传递（只会上下传递不会左右传递）
子级会把自己的margin-top与margin-bottom传递给父级
解决办法：给父级加上一个边框（其中一个办法）
2、margin上下叠压（只有上下会叠压，左右不会叠压）
上边元素的margin-bottom与下边元素的margin-top叠压在了一起（他会取大的值）
解决办法只给上边的元素设置margin-bottom或只给下边的元素设置margin-top就可以了
auto 自动
margin-left：auto； 元素居右显示
margin-right：auto； 元素居左显示
元素水平居中显示
margin：auto；
主要区别可以总结为：
1、left指令要生效，必须其有position：relative或者position：absolute的定位才能执行；margin-left则不需要。
2、position:relative 只能定位在当前位置，受其父div位置的控制；position:absolute可以使div脱离文档源，位置由上一个有定位的祖div控制。
为了方便观察，我把背景颜色换了，然后把系统自带的内边距外边距都取消了）
具体输入*{background-color: #eee margin: 0px padding: 0px}
1.1 生成一个div，输入{border: 1px red solid height: 200px width: 200px left: 50px} 其效果图为:
这时候输入了left=200px，但是div并没有移动，这是由于他没有被定位，所以left指令无法实行。
1.2 但是如果对这个div进行相对定位或者绝对定位，那么它会定位在他所出现的位置，然后对left或top的指令再进行移动。这次我们把position：absolute/relative 加上，输入{border: 1px red solid height: 200px width: 200px left: 50pxposition：relative； }，其效果图为：
这时候他就会先根据他一开始的定位发生移动，left的指令就生效了。
1.3 接下来，把left指令，换为margin-left，把position的指令删除，输入{border: 1px red solid height: 200px width: 200pxmargin-left: 50px}，其效果图为：
这时候它就往右边移动了50px，也就是距离左边距50px。可以得出其指令并不需要position位，它直接规定边距的距离。
1.4 最后我们把position；left；margin-left都加上，输入{border: 1px red solid height: 200px width: 200px left: 50pxposition：relative；margin-left: 50px}， 其效果图为：
这时候两个指令都生效了。首先margin-left:50px, 先让这个div距离左边距50px，然后position:relative的指令使div定位在这个位置，最后left:50px；的指令，使div再距离所定位的位置50px，所以一共离左边距100px。
创建以下三个div：
<div id="father">
<div id="son">
<div id="grandson"></div>
</div>
</div>
1、在style分别输入
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:relative }
其效果图为：
这时候#son并没有position，但是#grandson的position为relative，所以他只能对当前的定位（由于他是father与son的子文件，所以会跟他们进行相关的位移后，再实施它自己的指令进行位移，所以一开始的定位应该在黑色框内的右上角）进行位移。
2、保持其他参数不变，然后把#grandson的position:relative 给为position:absolute，具体为：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:absolute }
其效果图为：
此时，由于#grandson的position为absolute，即脱离文本源，就是他不会受没有定位的父div的影响，就是说其定位会忽略没有position定位的div，而直接找到最近一个有定位的祖div，再进行定位，所以它直接找到的是#father的定位，然后想对它定位后再进行left=50px的指令。
3. 要证明这一点很简单，我们再给#grandson生一个子div id="ggson"
这时候布局如图：
在style输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:absolute }
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:absolute}
其效果图为：
#ggs的定位追踪到#grandson上，所以在其定位上做出left=10px的指令。
这时候我们在吧#grandson的position给删掉，输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px}
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:absolute}
这时的效果图为：
由于#son与#grandson上面都没有position的定位了，所以#ggson只能定位到father的position上面。
最后我们再把#ggson的position:absolute改为relative,输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px}
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:relative}
其效果图为：
这时候他就不会找祖div的position，其定位只接受其父div控制，只能定位在所在的位置。
<style>
.tongpian6 {
height: 50px
padding-left: 20px
vertical-align: middle
}
</style>
<table border="1">
<tr>
<td class="tongpian6">hehehe</td>
</tr>
</table>
因为：
1、表格内左边距使用padding-left，而不是margin-left。margin-left叫外左边距。
2、单元格垂直居中，设定vertical-align为middle，而不是bottom（靠下）。
扩展资料：css文本和div垂直居中方法总结
对文本，只需要对其父级元素设置text-align: center，而对div等块级元素，只需要设置其left和right的margin值为auto。
要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
1、单行文本垂直居中
对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：
<!--html代码-->
<div id="div1">
这是单行文本垂直居中
</div>
/*css代码*/
#div1{
width: 300px
height: 100px
margin: 50px auto
border: 1px solid red
line-height: 100px/*设置line-height与父级元素的height相等*/
text-align: center/*设置文本水平居中*/
overflow: hidden/*防止内容超出容器或者产生自动换行*/
2、子div垂直居中
<!--html代码-->
<div id="outer">
<div id="middle">
子div(固定大小)垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4
width: 300px
height: 200px
position: relative
}
#middle{
background-color: #E41627
width: 100px
height: 100px
margin: auto
position: absolute
left: 50%
top: 50%
margin-left: -50px
margin-top: -50px
}
