Topnew CSS v 2023 Box

2022-04-12 00:00
853 0 0
CSS

2 - Box

A css box includes margin, border, padding, and size.

Please refer to Grid 12 system for all sizes of a box.

For each margin (m), border (b) or padding (p)

We have 4 sides: t = top, b = bottom, l = left, r = right. Also x = left + right, y = top + bottom. Without sides means all sides.

Each of above in 5 scales: -0 = 0, -1 = .25rem, -2 = .5rem, -3 = 1rem, -4 = 1.5rem, -5 = 3rem. For margin has additional scale = auto. For border the unit is in px

eg mt-3 = margin-top:3rem / p-2 = padding:.5rem / bx-5 = border-right:3px;border-left:3px

2.1 Margins: m / mt / mb / mr / ml / mx / my -0,1,2,3,4,5,auto

m-3 = margin of -3 (1rem) for all sides

mt-2 = margin-top of -2 (.5rem)

mx-4 my-1 = margin:.25rem 1.5rem

2.2 Borders: b / bt / bb / br / bl / bx / by -0,1,2,3,4,5 in px

b-1 = border of -1 (1px) for all sides bx-5 by-3

2.3 Paddings: p / pt / pb / pr / pl / px / py -0,1,2,3,4,5

p-5 = padding of -5 (3rem) for all sides . . . . . . . . . . . . . . . . .

px-5 = padding of -5 (3rem) for left and right . . . . . . . . . . . . .

Back « Topnew CSS v 2023 Grid
Next » Topnew CSS v 2023 Color