众所周知 padding
是 下面四个属性的简写形式。
padding-top
padding-right
padding-bottom
padding-left
margin
也是同理。
padding
属性值的设置有多种值的情况。 如:
- 单个值:
padding:1px
- 两个值:
padding: 2px 4px
- 三个值:
padding:2px 4px 8px
- 四个值:
padding: 1px 2px 3px 4px
.
初学的时候要记得各个值对应的关系,还是要花点时间的。
下面根据我的理解,给出几个记忆的小 Tip。
单值的情况,这个最简单,不用多说, 4个方向的
padding
一律设置成此值。两个值的情况,记住这是两对值,“上下一对”, “左右一对”
也就是说
- 第一个值是用于设置
padding-top
和padding-bottom
- 第二个值是用于设置
padding-right
和padding-left
- 三个值的情况,记住这么一个分组关系。 上、中、下 也就是说。
- 第一个值用于设置
padding-top
- 第二个值用于设置
padding-left
和padding-right
- 第三个值用于设置
padding-bottom
- 四个值的情况,这种情况就比较麻烦了,我想不到一个合适的助记词,比如”东西南北” 之类的,因为对不上。还真是麻烦,知道麻烦的英文单词是怎么写的吗?
trouble
对不对?
四个值的助记单词就是TRouBLe
了。看我大写的几个字母。 也就是说。
- 第一个值对应 T 即
top
用于设置padding-top
- 第二个值对应 R 即
right
用于设置padding-right
- 第三个值对应 B 即
bottom
用于设置padding-bottom
- 第四个值对应 L 即
left
用于设置padding-left
关于四个值的情况,还有一个助记概念就是 TRBL ,从上到左, 是顺时针的走向。这样你也可以记成有一家弹性工作制的公司,早上 12 点(top)开始上班,然后 3点中午休(right),然后 6 点针下午晚餐(bottom),然后晚上9点钟下班(right)
margin
是同样的道理就不多说了。