padding内边距是什么意思_padding和margin

padding内边距是什么意思_padding和marginpadding 是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。 一个元素的内边距区域指的是其内容与其边框之间的空间 注意:内边距控制的是元素内部空出的空间,相反,margin 操作元素外部空出的空间 padding属性构成 padding-top:内容上边

padding 是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

一个元素的内边距区域指的是其内容与其边框之间的空间

注意:内边距控制的是元素内部空出的空间,相反,margin 操作元素外部空出的空间  

padding属性构成

  • padding-top:内容边距

  • padding-bottom:内容边距

  • padding-left:内容边距

  • padding-right:内容边距

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

padding内边距是什么意思_padding和margin

 语法

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;/* inherit:继承父元素padding */
padding: initial;/* initial:设置padding属性为它的默认值(IE 不支持) */
padding: unset;/* unset:不设置padding */

 

注意:取值不能为负数!

padding 属性接受 1~4 个值:

  • 当只指定一个值时,该值会统一应用到全部四个边的内边距上。
  • 指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边
  • 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距。
  • 指定四个值时,依次(顺时针方向)作为上边右边下边,和左边的内边距
padding: 5%;                /* 所有边:5% 的内边距 */

padding: 10px;              /* 所有边:10px 的内边距 */

padding: 10px 20px;         /* 上边和下边:10px 的内边距 */
                            /* 左边和右边:20px 的内边距 */

padding: 10px 3% 20px;      /* 上边:   10px 的内边距 */
                            /* 左边和右边:3% 的内边距 */
                            /* 下边:   20px 的内边距 */

padding: 1em 3px 30px 5px;  /* 上边:1em  的内边距*/
                            /* 右边:3px  的内边距*/
                            /* 下边:30px 的内边距*/
                            /* 左边:5px  的内边距*/

今天的文章padding内边距是什么意思_padding和margin分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/51004.html

(0)
编程小号编程小号
上一篇 2023-09-01
下一篇 2023-09-01

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注