PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

css3的边距属性包括哪两种

青灯夜游
青灯夜游 原创
2022-01-13 15:16:08 2336浏览

css3的两种边距属性:1、内边距属性(padding、padding-top等),可设置元素边框与元素内容之间的空间;2、外边距属性(margin、margin-top等),可设置元素周围的空间。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3的边距分为两种:

  • 内边距(padding):元素边框与元素内容之间的空间

  • 外边距(margin):元素周围的空间

1.png

内边距属性

属性说明
padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

示例:

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

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

</html>

1.png

外边距属性

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

示例:

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

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

</html>

2.png

(学习视频分享:css视频教程

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。