MBP and TRBL : 2 CSS shorthands (簡寫) for layout

CSS 關於版面佈局(layout)有兩個重要的順序
MBP and TRBL
自己常會忘記確實的先後順序
發明一些聯想來記住他們的簡寫

MBP: margin, border, padding

• 由外而內
• mvp 諧音
• MB 聯想 主機板 mainboard/motherboard/member
• BP 聯想 英鎊 british pound
  

TRBL: top, right, bottom, left

• 順時鐘
• trouble 聯想 TR-ou-BL-e
• TR 聯想 table/tr/td
• BL 聯想 SBL

[example]

margin:100px 50px; --> margin 的 top=100px, right=50px; bottom=top; left=right

border: 20px --> border 的top=20px; R==B==L==top

padding: 40px 30px 20px 100px --> padding的 top=40px, right=30px, bottom=20px, left=100px

//===

There are two important sequences in CSS layout : MBP and TRBL,
but i often forget the exact order.

So, I invent some connections/correlations to memorize the two shorthands

MBP: margin, border, padding

• from outside to inside
• mvp (homophonous)
• MB connects to mainboard/motherboard/member
• BP connects to British Pound

TRBL: top, right, bottom, left

• clockwise
• trouble connects to TR-ou-BL-e
• TR connects to table/tr/td
• BL connects to SBL