margin垂直方向塌陷问题
第一个div盒子设置了margin-button:10px，下面的div盒子设置了margin-top:30px
此时中间距实际只有30px，以最大值为准，第一个盒子的margin-button的10px“塌陷”进去了。
如下方法同时满足可解决垂直塌陷问题，水平方向无塌陷问题。
- 给盒子设置浮动，浮动盒子不塌陷
- 清除子元素浮动给父元素带来的影响
浮动盒子，定位盒子，绝对定位，固定定位在垂直方向不塌陷
margin水平居中
水平居中盒子
- 盒子必须设置宽度，不设置则继承了父盒子宽度
- 浮动盒子、固定定位、绝对定位盒子该方法不适用，必须是标准流下的盒子
margin: 0 auto;
盒子中文字水平居中用text-align:center;属性
善用父元素的padding属性
如果父元素无boder属性，则子标签在设置margin-top的时候会将父元素“踹”一行下去。设置boder可解决，但不这样做。
通过对父元素设置padding属性解决此问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>善用父元素的padding属性</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; background-color: #E766EA; } .a{ width: 100px; height: 100px; background: #666666; margin-top: 10px; margin-left: 10px; } </style> </head> <body> <div class="father"> <div class="a"> </div> </div> </body> </html>
padding方式设置，但是设置padding的时候，父元素需要在相应方向减去对应像素
.father{ width: 50px; height: 50px; background-color: #E766EA; padding-top: 10px; padding-left: 10px; }
