[Web] CSS: pading(内边距)简写时的赋值顺序

2024-11-18 16:07:11

如下是 CSS 中内边距的设置:

padding-top: 4px

padding-bottom: 12px

padding-left: 4px

padding-right: 12px

--------------------------------------------------------------------

为了使代码更加简洁, 我们进行简写, 达到相同的功能.

当[上,下]等宽, [左,右]等高时,可以简写为:

padding: 4px 12px; /*第一个值对应[上,下]的高度, 第二个值对应[左,右] */

如果只有[上,下]或[左,右]有一面是等高,或等宽时:

padding: 4px 12px 4px; /* 分别对应[上, 右, 下],由于没有第四个量, 也就是默认[左]为缺省, 与[右]采用同样宽度, 即12px. */

如果, [上,右,下,左] 距离都不相等时, 则要设置4个值

padding: 4px 12px 4px 12px; /* [上,右,下,左], 赋值顺序为顺时针. */

如果只有一个量:

padding: 4px; /* 这意味着[上,右,下,左]的宽度是相等的, 都为4px *

猜你喜欢