LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

CSS 21天入门:外边距(margin)和填充(padding)

admin
2024年10月18日 22:37 本文热度 87

前面介绍了边框,一个元素除了边框这种能看见的,它还有两个看不见的空间,就是外边距(margin)和填充(padding)。

为方便起见,以下直接使用 margin 和 padding 叙述。

margin 定义元素与外部元素之间的间距,而 padding 定义的,是元素自身边框与元素内容之间的间距。

咱们看一张图就清楚了。

在最中间的内容块,它外面的浅蓝区域是 padding,注意看到它是内容与实线边框之间的区域。

而实线边框与最外层的虚线框之间的区域,则是 margin。

虚线框之外的地方,就是其它元素占据的区域。

这张图里,放置了内容块上右下左各一个元素区域,结合昨天介绍的边框的内容,是不是很熟悉?

外边距(margin)

margin 本身就是个属性,不过它和 border 一样,是个简写。

那自然,如果不简写,需要用到的属性如下:

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

如下图所示:

它们能接受的值,可以是一个固定的值,比如 1px, 1em, 1pt 等,也可以是一个百分比(%)。

简写具体代表的值,则和之前说过的上右下左顺序一样,只不过这里的简写还有几种情况。

如果是按以下方式写全了,意思自然不用说了。

.one {   margin: 1px 2px 3px 4px; } 

简写则分成以下情况。

简写为一个值

.one {   margin: 1px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 1px;   margin-bottom: 1px;   margin-left: 1px; } 

简写为两个值

.one {   margin: 1px 2px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 1px;   margin-left: 2px; } 

简写为三个值

.one {   margin: 1px 2px 3px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 3px; } 

填充(padding)

padding 本身也个属性,它和 margin、 border 一样,是个简写。

不使用简写的时候,则有以下属性可用:

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

如下图所示:

padding 的简写方式和效果和 margin 完全一样,此外不再展开叙述。

总结

  • 🍑 margin 定义元素与外部元素之间的间距,也就是 border 与外部其它元素之间的间距。

  • 🍑 padding 定义元素自身边框与元素内容之间的间距。

  • 🍑 margin 和 padding 本身都是简写元素,简写的顺序遵循上右下左。


该文章在 2024/10/19 12:17:10 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved