margin和padding属性详解

最新推荐文章于 2025-05-27 11:32:54 发布

Zzze0101

最新推荐文章于 2025-05-27 11:32:54 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： margin padding

本文链接：https://blog.youkuaiyun.com/Zzze0101/article/details/90399731

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS中的margin和padding属性，包括它们的定义、使用方式及注意事项。margin用于设置元素的外边距，可创建元素周围的空白区域，而padding则设置元素的内边距，为元素内部留出空间。内容涵盖了margin和padding的length值、auto值的使用，以及如何清除浏览器默认的margin和padding。此外，还特别提到了块级元素外边距的合并规则和行内元素内边距对行高计算的影响。

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

margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
margin样式属性用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值：

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。注：允许使用负值，不过要谨慎使用。
%	规定基于父元素的宽度的百分比的外边距。

1、length

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			div {
				border: 1px solid black;
			}
			.one{
				margin: 30px;
			}
			.two{
				margin: 20px 40px;
			}
			.three{
				margin: 40px 20px 30px ;
			}
			.four {
				margin: 10px 30px 60px 150px;
			}
		</style>
	</head>

	<body>
		<div class="one">第一个div,四个边框均为30像素</div>
		<div class="two">第二个div,上下边框为20像素，左右边框为40像素</div>
		<div class="three">第三个div，上边框40像素，下边框30像素，左右边框20像素</div>
		<div class="four">第四个div，上边框10像素，右边框30像素，下边框60像素，左边框150像素</div>
	</body>

</html>

执行结果：
在这里插入图片描述
2、auto

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>居中显示</title>
		<style type="text/css">
			div {
				width: 100px;
				margin: 0 auto;
				border: 1px solid black;
			}
		</style>
	</head>

	<body>
		<div>第一个div</div>
	</body>

</html>

执行结果：
在这里插入图片描述
3、取消浏览器为HTML文档中各标签设置的margin默认值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			* {
				margin: 0;
			}
			
			div,
			p {
				border:1px solid red;
			}
		</style>
	</head>

	<body>
		<div>div</div>
		<p>段落</p>
	</body>

</html>

执行结果：
在这里插入图片描述
注意：
块级元素的垂直相邻外边距会合并（即外边距合并），合并后的外边距间距等于两个外边距高度中的较大者；行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并。

padding

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
padding样式属性在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度，该属性有多个值：

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值。
%	规定基于父元素的宽度的百分比的内边距。

1、length

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			div {
				border: 1px solid black;
			}
			.one{
				padding: 30px;
			}
			.two{
				padding: 20px 40px;
			}
			.three{
				padding: 40px 20px 30px ;
			}
			.four {
				padding: 10px 30px 60px 150px;
			}
		</style>
	</head>

	<body>
		<div class="one"><span style="border: 1px solid red">第一个div,四个内边距均为30像素</span></div>
		<div class="two"><span style="border: 1px solid red">第二个div,上下内边距为20像素，左右内边距为40像素</span></div>
		<div class="three"><span style="border: 1px solid red">第三个div，上内边距40像素，下内边距30像素，左右内边距20像素</span></div>
		<div class="four"><span style="border: 1px solid red">第四个div，上内边距10像素，右内边距30像素，下内边距60像素，左内边距150像素</span></div>
	</body>

</html>

执行结果：
在这里插入图片描述
2、取消浏览器为HTML文档中各标签设置的padding默认值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>padding</title>
		<style type="text/css">
			.a {
				padding: 0;
			}
			
			ol {
				border: 1px solid;
			}
		</style>
	</head>

	<body>
		<ol class="a">

			<li>文学</li>
			<li>传记</li>
			<li>艺术</li>
			<li>摄影</li>

		</ol>
		<ol>

			<li>文学</li>
			<li>传记</li>
			<li>艺术</li>
			<li>摄影</li>

		</ol>
	</body>

</html>