Spacing library
Margin and padding spacing by most common uses case
Install
npm i css-common-spacing --save
CSS
Add the spacing.css development or spacing.min.css production to your html page.
Use it like you want: for example in a link tag
<link rel="stylesheet" href="css-spacing/spacing.min.css" type="text/css">Classes
Margin
You can set margins with:
-
m-X(all margins) -
m-X-negative(all negative margins) -
m-X-i(all margins with!important) -
m-X-negative-i(all negative margins with!important) -
m-t-X(top margin) -
m-t-X-negative(top negative margin) -
m-t-X-i(top margin with!important) -
m-t-X-negative-i(top negative margin with!important) -
m-b-X(bottom margin) -
m-b-X-negative(bottom negative margin) -
m-b-X-i(bottom margin with!important) -
m-b-X-negative-i(bottom negative margin with!important) -
m-l-X(left margin) -
m-l-X-negative(left negative margin) -
m-l-X-i(left margin with!important) -
m-l-X-negative-i(left negative margin with!important) -
m-r-X(right margin) -
m-r-X-negative(right negative margin) -
m-r-X-i(right margin with!important) -
m-r-X-negative-i(right negative margin with!important)
Padding
You can set paddings with:
-
p-X(all paddings) -
p-X-negative(all negative paddings) -
p-X-i(all paddings with!important) -
p-X-negative-i(all negative paddings with!important) -
p-t-X(top padding) -
p-t-X-negative(top negative padding) -
p-t-X-i(top padding with!important) -
p-t-X-negative-i(top negative padding with!important) -
p-b-X(bottom padding) -
p-b-X-negative(bottom negative padding) -
p-b-X-i(bottom padding with!important) -
p-b-X-negative-i(bottom negative padding with!important) -
p-l-X(left padding) -
p-l-X-negative(left negative padding) -
p-l-X-i(left padding with!important) -
p-l-X-negative-i(left padding with!important) -
p-r-X(right padding) -
p-r-X-negative(right negative padding) -
p-r-X-i(right padding with!important) -
p-r-X-negative-i(right padding with!important)
Values
The X values that you can see in margin and padding section, can be:
- 0
- 4
- 8
- 12
- 16
- 24
- 36
- 48
- 64
- 96
- 128