(前端)html与css css 11、margin外边距

外边距margin

外边距是盒子与盒子之间的距离，设置方法与内边距padding非常相似。

margin他是一个复合属性，有四个方向↓

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

练习↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

不给div设置margin属性时，效果图↓

给div设置margin属性后，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid blue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

显然我给div设置了一个上边距的属性，效果图↓

复合属性写法↓

/*上 下 左 右*/
margin: 10px 20px 30px 40px;
/*上 左右 下*/
margin: 10px 20px 30px;
/*上下 左右*/
margin: 10px 20px;

让盒子水平居中

属性值：auto

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid blue;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

效果图↓