【CSS学习笔记八】外边距和填充

最新推荐文章于 2023-01-20 15:33:21 发布

思索与猫

最新推荐文章于 2023-01-20 15:33:21 发布

阅读量298

点赞数

分类专栏： CSS学习文章标签： css 学习笔记

本文链接：https://blog.csdn.net/qq_28997735/article/details/99900973

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.外边距

margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域，也就是说是完全透明的，没有颜色。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性，与边框相同。

参考值：

auto：自动，设置浏览器边距
length：长度，单位px,em等
%：定义一个使用百分比的边距

语法：

/*第一种表达*/
p
{
	margin-top:50px;
	margin-bottom:50px;
	margin-left:100px;
	margin-right:100px;
}

/*第二种表达,注意顺序，依旧是上右底左*/
p
{
	margin:50px 100px 50px 100px;
}

/*第三种表达 上：50px ,右/左：100px ,底：50px*/
p
{
	margin:50px 100px 50px;
}

/*第四种表达 上底：50px, 左右：100px*/
p
{
	margin:50px 100px;
}

二.填充（内边距）

定义元素边框与元素内容之间的空间，即上下左右的内边距。

它的用法与外边距相同。

参考值：

length：长度，单位px,em等
%：定义一个使用百分比的边距

语法：

/*第一种表达*/
p
{
	padding-top:50px;
	padding-bottom:50px;
	padding-left:100px;
	padding-right:100px;
}

/*第二种表达,注意顺序，依旧是上右底左*/
p
{
	padding:50px 100px 50px 100px;
}

/*第三种表达 上：50px ,右/左：100px ,底：50px*/
p
{
	padding:50px 100px 50px;
}

/*第四种表达 上底：50px, 左右：100px*/
p
{
	padding:50px 100px;
}

实例：
将前面学到的边框，轮廓结合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>举例</title>
		<style>
			p
			{
				border:2px solid blue;
				outline:5px solid red;
				margin:10px;
				padding:10px 20px;
			}
		</style>
	</head>
	<body>
		<div style="width:250px">
			<p>一个顶俩</p>
		</div>
	</body>
</html>

结果：
在这里插入图片描述