padding:2em 2em 0;和padding:2em 2em 0 0;的区别?

发布于 2022-09-03 09:33:39 字数 98 浏览 15 评论 0

padding:2em 2em 0;和padding:2em 2em 0 0;的区别?
还有padding:0 2em 1em 和padding:0 0 2em 1em的区别?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

初相遇 2022-09-10 09:33:39

padding,margin,border-width之类的都是这种规则(可以按照这种方式理解,不过似乎标准上并不是这么写的)
四个值
第一个值控制上下左右,第二个值控制左右,第三个值控制下,第四个值控制左。
同时靠后的值会覆盖靠前的值。

===========================================
刚刚翻了一下 w3c(链接)
是这么说的

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

依次是 上内边距,右内边距,下内边距,左内边距
如果只有一个值,那么应用在所有(四个)方向上
如果只有两个值,则第一个值是上下内边距,第二个值是右左内边距
如果只有三个值,则第一个值是上内边距,第二个值是左右边距,第三个值是下内边距
如果是四个值,则依次为,上内边距,右内边距,下内边距,左内边距

℡Ms空城旧梦 2022-09-10 09:33:39

上 右 下 左 ,如果哪个没写,就跟对面一样。

山人契 2022-09-10 09:33:39
  • top right bottom left

  • top (right & left ) bottom

  • (top & bottom )(right & left )

  • (all)

帥小哥 2022-09-10 09:33:39

padding:2em 2em 0; 相当于 padding:2em 2em 0 2em;(你“左”没有设置值,默认会跟你“右”的值一样)

不忘初心 2022-09-10 09:33:39

padding,margin,这两个属性的控制都差不多,只是控制的范围不一样。
padding是内边距,即content到border的范围。
margin是外边距,即border外面的范围大小。
一般而言。都可以有四个值,即top(上),right(右),bottom(下),left(左),沿着顺时钟方向。
如果是一个值:表示上右下左都是这个值。
如果是两个值:第一个值是上下,第二个值是左右。
如果是三个值:第一个是上下的,第二个值是右的,第三个是左的。
如果是四个值:第一第二第三第四,分别是上右下左的值。

所以padding:0 2em 1em 和padding:0 0 2em 1em的区别就是
第一个:上下是0,右是2em,左是1em。
第二个:上是0,右是0,下是2em,左是1em。

ぺ禁宫浮华殁 2022-09-10 09:33:39

marign 与 padding 的设置都是遵从顺时针转的,
例如

padding: 0 2em;  第一个值设置的是上下,第二个值设置的是左右;
padding: 0 2em 0; 第一个值是上,第二个值是左右,第三个值就是下;
padding 0 2em 0 2em;  就是顺时针转了,上右下左了。
心房敞 2022-09-10 09:33:39

不同参数个数可以参照下图:
图片描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文