css-common-spacing

Spacing library

Margin and padding spacing by most common uses case

Install

npm i css-common-spacing --save

CSS

• Development
• Production

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