首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
宝塔
V2EX  ›  前端开发

帮你记住 CSS `padding` ,`margin` 属性的简写对应关系

  •  
  •   banxi1988 · 2018-06-01 16:03:45 +08:00 · 1627 次点击
    这是一个创建于 532 天前的主题,其中的信息可能已经有所发展或是发生改变。

    众所周知 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。

    1. 单值的情况,这个最简单,不用多说,4 个方向的 padding 一律设置成此值。

    2. 两个值的情况,记住这是两对值,"上下一对", "左右一对" 也就是说

    • 第一个值是用于设置 padding-toppadding-bottom
    • 第二个值是用于设置 padding-rightpadding-left
    1. 三个值的情况,记住这么一个分组关系。 上、中、下 也就是说。
    • 第一个值用于设置 padding-top
    • 第二个值用于设置 padding-leftpadding-right
    • 第三个值用于设置 padding-bottom
    1. 四个值的情况,这种情况就比较麻烦了,我想不到一个合适的助记词,比如"东西南北" 之类的,因为对不上。还真是麻烦,知道麻烦的英文单词是怎么写的吗? trouble 对不对? 四个值的助记单词就是 TRouBLe 了。看我大写的几个字母。 也就是说。
    • 第一个值对应 Ttop 用于设置 padding-top
    • 第二个值对应 Rright 用于设置 padding-right
    • 第三个值对应 Bbottom 用于设置 padding-bottom
    • 第四个值对应 Lleft 用于设置 padding-left

    margin 是同样的道理就不多说了。

    原文链接

    20 回复  |  直到 2018-06-02 05:40:40 +08:00
        1
    hahastudio   2018-06-01 16:09:16 +08:00 via Android
    难道不是顺时针么?
        2
    banxi1988   2018-06-01 16:14:03 +08:00
    @hahastudio TRBL 也是顺时针啊。
        3
    ooops   2018-06-01 16:15:57 +08:00
    @hahastudio 我也想说。trouble 貌似更难记了。。。
        4
    littleylv   2018-06-01 16:16:18 +08:00
    我能说其实这个很好记么。
        5
    torbrowserbridge   2018-06-01 16:18:38 +08:00
    水这么多就是为了最后的链接么。
        6
    f2f2f   2018-06-01 16:30:17 +08:00
    上右下左……这个很难记吗?
        7
    yyfearth   2018-06-01 17:05:04 +08:00
    同意楼上 只要记住顺时针 “上右下左” 就够了
    如果少了最后一个左 那么就用右的值
    如果还少了一个下 那么就用上的值
    如果只有一个值 当然就全部都用了
        8
    ccbikai   2018-06-01 17:08:41 +08:00 via iPhone
    上右下左
        9
    agdhole   2018-06-01 17:14:41 +08:00
    上右下左
    我一般都是直接写明 -right
        10
    SourceMan   2018-06-01 17:24:55 +08:00
    不是顺时针吗?
        11
    yinanc   2018-06-01 17:26:57 +08:00 via iPhone
    这还要记的吗…多写两次就记住了,现在半年没写 css 了都还没忘
        12
    napsterwu   2018-06-01 17:54:53 +08:00 via iPhone
    两年没写了都还记得上右下坐… 记这玩意就跟奇变偶不变差不多道理
        13
    KimJongun   2018-06-01 17:56:20 +08:00
    所以看不懂前端
        14
    jasperjia   2018-06-01 17:58:04 +08:00
    秒表怎么转,一下子就记住了
        15
    iTakeo   2018-06-01 19:11:44 +08:00 via iPhone
    写这么一大堆,一句:上右下左,不是更好么?
        16
    moxiaonai   2018-06-01 19:59:30 +08:00
    顺时针不好记
        17
    ChiangDi   2018-06-01 20:07:51 +08:00
    上右下左 不好记?
        18
    bojackhorseman   2018-06-01 22:05:27 +08:00 via Android
    写多了就记住了,因为有很多地方都是这个规矩,border 等等
        19
    dobelee   2018-06-01 22:08:01 +08:00 via Android   ♥ 2
    可怕。我看一眼就記了快 10 年,看完你這帖子,我立馬懵逼了。。。
        20
    lightening   2018-06-02 05:40:40 +08:00
    不就是顺时针转吗?没设置的就取对面。哪有这么麻烦?!
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2229 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 12:45 · PVG 20:45 · LAX 04:45 · JFK 07:45
    ♥ Do have faith in what you're doing.