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

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

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

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