Home / CMS


    Topnew CSS v 2023 Box

    2022-04-12 00:00
    67   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

    Comments

    Leave a commentEdit comment

    Category