首页 > web前端 > 前端问答 > css3的边距属性包括哪两种

css3的边距属性包括哪两种

青灯夜游
发布: 2022-01-13 15:16:08
原创
2578 人浏览过

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

css3的边距属性包括哪两种

本教程操作环境: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视频教程

以上是css3的边距属性包括哪两种的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板