网站首页编程语言正文

CSS 轮廓（outline）/CSS margin(外边距)/CSS padding（填充）

作者：蓝桉ྀ 更新时间： 2022-07-16 编程语言

所有CSS 轮廓（outline）属性

CSS margin(外边距)

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

可能的值

Margin - 单边外边距属性

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

Margin - 简写属性：

margin:100px 50px;

所有的CSS边距属性

CSS padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>

</html>

所有的CSS填充属性

原文链接：https://blog.csdn.net/qq_51201134/article/details/125811057

上一篇：idea 编写springmvc项目并部署到Tomcat
下一篇：css盒子模型和css边框属性

网站首页 编程语言 正文