margin属性

编辑本博客

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>

View Code

padding方式设置，但是设置padding的时候，父元素需要在相应方向减去对应像素

.father{
width: 50px;
height: 50px;
background-color: #E766EA;
padding-top: 10px;
padding-left: 10px;
}

View Code