盒子模型外边距 Margin 用于控制 盒子 与 盒子 之间的距离 ;
外边距设置语法 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>外边距</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/* 设置外边距 */
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
外边距
</div>
</body>
</html>
展示效果 :
外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>外边距</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/* 设置外边距 - 复合写法 - 上、右、下、左 外边距 */
margin: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div>
外边距
</div>
</body>
</html>
展示效果 :