当前位置：首页 > article >正文

【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )

article 2025/2/28 3:04:18

文章目录

一、盒子模型外边距设置
- 1、外边距属性单独设置
- 2、外边距属性复合写法

一、盒子模型外边距设置

盒子模型外边距 Margin 用于控制盒子与盒子之间的距离 ;

1、外边距属性单独设置

外边距设置语法 :

margin-left : 设置左外边距 ;
margin-top : 设置上外边距 ;
margin-right : 设置右外边距 ;
margin-bottom : 设置下外边距 ;

代码示例 :

<!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 个值 : 设置上、右、下、左外边距 ;

代码示例 :

<!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>