文章目录
- 一、盒子模型外边距设置
- 1、外边距属性单独设置
- 2、外边距属性复合写法
一、盒子模型外边距设置
盒子模型外边距 Margin 用于控制 盒子 与 盒子 之间的距离 ;
1、外边距属性单独设置
外边距设置语法 :
- margin-left : 设置 左外边距 ;
- margin-top : 设置 上外边距 ;
- margin-right : 设置 右外边距 ;
- margin-bottom : 设置 下外边距 ;
代码示例 :
代码语言：javascript复制<!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>展示效果 :
2、外边距属性复合写法
外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ;
- 设置 1 个值 : 设置 上下左右 外边距 ;
- 设置 2 个值 : 设置 上下、左右 外边距 ;
- 设置 3 个值 : 设置 上、左右、下 外边距 ;
- 设置 4 个值 : 设置 上、右、下、左 外边距 ;
代码示例 :
代码语言：javascript复制<!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>展示效果 :
