css3中边距属性有哪些
更新:HHH   时间:2023-1-7


这篇文章主要介绍css3中边距属性有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

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

css3的边距分为两种:

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

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

内边距属性

属性说明
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>

外边距属性

属性描述
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>

以上是“css3中边距属性有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注天达云行业资讯频道!

返回web开发教程...