CSS-margin和padding样式属性

最新推荐文章于 2025-01-21 22:10:57 发布

原创最新推荐文章于 2025-01-21 22:10:57 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中的外边距(margin)和内边距(padding)的使用方法，包括如何设置不同数量的值来控制元素四周的间距，以及特定方向的边距调整。通过实例展示了这些属性如何影响页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、外边距

准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				border: 1px solid black;
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="in" style="background-color: red;">	</div>
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;"></div>
		</div>
	</body>
</html>

在这里插入图片描述

1、margin

外边距可以设置1到4个值

一个值

只有一个值的时候是把四周都设为同样的外边距

在中间绿色的div标签中设置margin样式属性

<div>
   		<div class="in" style="background-color: red;">	</div>
   		<!--设置margin样式属性-->
   		<div class="in" style="background-color: green;margin: 20px;"></div>
   		<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

两个值

两个值对应的第一个值是上下外边距，第二个是左右外边距

在中间绿色的div标签中设置margin样式属性

<div>
   	<div class="in" style="background-color: red;">	</div>
   	<!--设置margin样式属性上下为40px，左右为20px-->
   	<div class="in" style="background-color: green;margin: 40px 20px;"></div>
   	<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

三个值

三个值对应的第一个值是上外边距，第二个是左右外边距，第三个是下外边距

在中间绿色的div标签中设置margin样式属性

<div>
   	<div class="in" style="background-color: red;">	</div>
   	<!--设置margin样式属性上外边距为40px，左右外边距为10px，下外边距为60px-->
   	<div class="in" style="background-color: green;margin: 40px 10px 60px;"></div>
   	<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

四个值

四个值对应的为顺时针方向，依次为上右下左外边距

在中间绿色的div标签中设置margin样式属性

<div>
   	<div class="in" style="background-color: red;">	</div>
   	<!--设置margin样式属性,上右下左外边距依次为10px,20px,40px,60px-->
   	<div class="in" style="background-color: green;margin: 10px 20px 40px 60px;"></div>
   	<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

2、margin-top

设置上外边距

<div>
		<div class="in" style="background-color: red;">	</div>
		<div class="in" style="background-color: green;margin-top: 10px;"></div>
		<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

3、margin-right

设置右外边距

<div>
		<div class="in" style="background-color: red;">	</div>
		<div class="in" style="background-color: green;margin-right: 10px;"></div>
		<div class="in" style="background-color: yellow;">	</div>
</div>

设置右边距效果不太明显，使用Chrome浏览器的F12可以查看它的属性，可以看到这里已经把右边距设置为了10px

4、margin-bottom

设置下外边距

<div>
		<div class="in" style="background-color: red;">	</div>
		<div class="in" style="background-color: green;margin-bottom: 10px;"></div>
		<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

5、margin-left

设置左外边距

<div>
		<div class="in" style="background-color: red;">	</div>
		<div class="in" style="background-color: green;margin-left: 10px;"></div>
		<div class="in" style="background-color: yellow;">	</div>
</div>

在这里插入图片描述

二、内边距

内边距和外边距很像所以这里不逐个演示，这里只演示padding样式四个值的情况和padding-left

准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				border: 1px solid black;
				height: 300px;
				width: 300px;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div class="in" style="background-color: red;">	</div>
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;"></div>
		</div>
	</body>
</html>

结果
在这里插入图片描述

1、padding

内边距也可以设置一到四个值，和margin类似

一个值

只有一个值的时候是把四周都设为同样的外边距

两个值

有两个值的时候是第一个值为上下内边距，第二个值为左右内边距

三个值

三个值为第一个值为上内边距，第二个值为左右内边距，第三个值为下内边距

四个值

四个值的时候，为顺时针顺序指定，上右下左。

#out{
		border: 1px solid black;
		height: 300px;
		width: 300px;
		padding: 10px 20px 30px 40px;
	}

结果
在这里插入图片描述
使用浏览器的F12查看

2、padding-top

指定上内边距

3、padding-right

指定右内边距

4、padding-bottom

指定下内边距

5、padding-left

指定左内边距

#out{
		border: 1px solid black;
		height: 300px;
		width: 300px;
		padding-left: 30px;
	}

在这里插入图片描述
注意
1、设置内边距的时候会改变块级元素的大小
2、使用margin: 0 auto;可以设置居中

CSS-margin和padding样式属性

文章目录

一、外边距

1、margin

一个值

两个值

三个值

四个值

2、margin-top

3、margin-right

4、margin-bottom

5、margin-left

二、内边距

1、padding

一个值

两个值

三个值

四个值

2、padding-top

3、padding-right

4、padding-bottom

5、padding-left