CoCreate utility CSS

- - -

- -

- CoCreate provides the most convenient utility class. -

- -

Usage

- - -

+ + + + + +

+ +

CoCreate utility CSS

+ + +

+ +

+ CoCreate provides the most convenient utility class. +

+ +

Usage

+ + +

- CoCreate utility Classes are very easy to use. -

- We can use exactly same class names with "style:value". -

+					
+						
+							CoCreate utility Classes are very easy to use.
+						
+						
+							We can use exactly same class names with
+							"style:value".
+						
+						
+							                                 
 <div class="padding:16px"></div>
 <div class="font-size:0.5rem color:red"></div>
                                 
                             
-            
-            
-              Main styles and values provided as utility classes are as follows.
-            
-          
-          
-            
-              
-            
-            
-              direction
-            
-            
-              <div class="direction:ltr"></div>
-              ltr
-              rtl
-            
-            
-              display
-            
-            
-              <div class="display:block"></div>
-              block
-              inline-block
-              inline
-              none
-              inherit
-              table
-              table-cell
-              flex
-            
-            
-              overflow
-            
-            
-              <div class="overflow:auto"></div>
-              auto
-              visible
-              scroll
-              hidden
-            
-            
-              float
-            
-            
-              <div class="float:left"></div>
-              left
-              right
-              none
-            
-            
-              position
-            
-            
-              <div class="position:relative"></div>
-              inherit
-              relative
-              absolute
-              fixed
-              sticky
-            
-            
-              z-index
-            
-            
-              <div class="z-index:auto"></div>
-              auto
-              inherit
-              initial
-              -2
-              -5
-              1 ~ 15
-              100
-              101
-              111
-              1000
-              1111
-            
-            
-              top / bottom / left / right
-            
-            
-              <div class="top:auto"></div>
-              auto
-              0
-              1px ~ 50px
-              55px
-              60px
-              65px
-              ...
-              100px
-              150px
-              200px
-              ...
-              400px
-              -1px ~ -50px
-              -55px
-              -60px
-              -65px
-              ...
-              -100px
-              -150px
-              -200px
-              ...
-              -400px
-            
-            
-              bottom
-            
-            
-              <div class="bottom:auto"></div>
-              auto
-              0
-              1px ~ 50px
-              55px
-              60px
-              65px
-              ...
-              100px
-              150px
-              200px
-              ...
-              400px
-              -1px ~ -50px
-              -55px
-              -60px
-              -65px
-              ...
-              -100px
-              -150px
-              -200px
-              ...
-              -400px
-            
-            
-              left
-            
-            
-              <div class="left:auto"></div>
-              auto
-              0
-              1px ~ 50px
-              55px
-              60px
-              65px
-              ...
-              100px
-              150px
-              200px
-              ...
-              400px
-              -1px ~ -50px
-              -55px
-              -60px
-              -65px
-              ...
-              -100px
-              -150px
-              -200px
-              ...
-              -400px
-            
-            
-              right
-            
-            
-              <div class="right:auto"></div>
-              auto
-              0
-              1px ~ 50px
-              55px
-              60px
-              65px
-              ...
-              100px
-              150px
-              200px
-              ...
-              400px
-              -1px ~ -50px
-              -55px
-              -60px
-              -65px
-              ...
-              -100px
-              -150px
-              -200px
-              ...
-              -400px
-            
-            
-              height
-            
-            
-              <div class="height:0"></div>
-              0
-              1px ~ 10px
-              20px
-              30px
-              40px
-              45px
-              48px
-              50px
-              70px
-              80px
-              90px
-              100px
-              130px
-              150px
-              200px
-              250px
-              300px
-              350px
-              ...
-              700px
-              auto
-              25%
-              33%
-              50%
-              66%
-              75%
-              100%
-              100%-120px
-              100vh-120px
-              100vh-100px
-              100vh-90px
-              100vh-70px
-              100vh-50px
-              80vh
-              90vh
-              100vh
-              fill-available
-              fit-content
-            
-            
-              min-height
-            
-            
-              <div class="min-height:100px"></div>
-              100px
-              200px
-              ...
-              700px
-            
-            
-              max-height
-            
-            
-              <div class="max-height:300px"></div>
-              60px
-              100%
-            
-            
-              width
-            
-            
-              <div class="width:0"></div>
-              0
-              1px ~ 10px
-              15px
-              20px
-              25px
-              ...
-              90px
-              100px
-              110px
-              120px
-              130px
-              150px
-              180px
-              200px
-              250px
-              300px
-              350px
-              ...
-              1000px
-              10%
-              12%
-              15%
-              20%
-              25%
-              30%
-              35%
-              40%
-              41% ~ 50%
-              55%
-              60%
-              65%
-              70%
-              75%
-              80%
-              85%
-              90%
-              95%
-              100%
-              auto
-              unset
-              fill-available
-            
-            
-              min-width
-            
-            
-              <div class="min-width:75px"></div>
-              75px
-              100px
-              200px
-              250px
-              300px
-            
-            
-              max-width
-            
-            
-              <div class="max-width:300px"></div>
-              75px
-              100px
-              300px
-              400px
-              500px
-              600px
-              1050px
-            
-            
-              margin
-            
-            
-              <div class="margin:auto"></div>
-              auto
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-              auto-lr(left & right)
-              0-lr
-              0px_5px
-              0px_10px
-              10px_5px
-              ...
-              100px-lr
-              auto_0px(top & bottom)
-              0_0px
-              5px_0px
-              10px_0px
-              15px_0px
-              ...
-              100px_0px
-            
-            
-              margin-top
-            
-            
-              <div class="margin=top:auto"></div>
-              auto
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              margin-bottom
-            
-            
-              <div class="margin-bottom:auto"></div>
-              auto
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              margin-left
-            
-            
-              <div class="margin-left:auto"></div>
-              auto
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              margin-right
-            
-            
-              <div class="margin-right:auto"></div>
-              auto
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              padding
-            
-            
-              <div class="padding:0"></div>
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-              0_0px(top & bottom)
-              5px_0px
-              10px_0px
-              15px_0px
-              ...
-              100px_0px
-              0-lr(left & right)
-              1px-lr ~ 10px_5px
-              20px-lr
-              20px_5px
-              30px-lr
-              ...
-              100px-lr
-            
-            
-              padding-top
-            
-            
-              <div class="padding-top:0"></div>
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              padding-bottom
-            
-            
-              <div class="padding-bottom:15px"></div>
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              padding-left
-            
-            
-              <div class="padding-left:15px"></div>
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              padding-right
-            
-            
-              <div class="padding-right:15px"></div>
-              0
-              5px
-              10px
-              15px
-              ...
-              100px
-            
-            
-              border-width
-            
-            
-              <div class="border-width:0"></div>
-              0
-              1px ~ 10px
-              20px
-            
-            
-              border-color
-            
-            
-              <div class="border-color:black"></div>
-              white
-              black
-              extra-dark-gray
-              medium-dark-gray
-              dark-gray
-              extra-medium-gray
-              medium-gray
-              extra-light-gray
-              light-gray
-              light-pink
-              deep-pink
-              transparent-pink
-            
-            
-              border-style
-            
-            
-              <div class="border-style:dotted"></div>
-              dotted
-              dashed
-              solid
-              double
-              groove
-              ridge
-              inset
-              outset
-              none
-              hidden
-              transparent
-            
-            
-              border-radius
-            
-            
-              <div class="border-radius:0"></div>
-              0
-              1px ~ 10px
-              50px
-              50%
-              100%
-            
-            
-              font-size
-            
-            
-              <div class="font-size:18px"></div>
-              6px ~ 25px
-              30px
-              40px
-              50px
-              ...
-              80px
-              01rem
-              02rem
-              03rem
-              04rem
-              05rem
-              1rem
-              2rem
-            
-            
-              font-weight
-            
-            
-              <div class="font-weight:800"></div>
-              100
-              200
-              300
-              ...
-              900
-              bold
-            
-            
-              font-align
-            
-            
-              <div class="font-align:center"></div>
-              center
-              left
-              right
-            
-            
-              color
-            
-            
-              <div class="color:blue"></div>
-              white
-              black
-              extra-dark-gray
-              dark-gray
-              extra-medium-gray
-              medium-gray
-              extra-light-gray
-              light-gray
-              light-gray
-              very-light-gray
-              deep-pink
-              light-blue
-              blue
-            
-            
-              text-overflow
-            
-            
-              <div class="text-overflow:ellipsis"></div>
-              ellipsis
-            
-            
-              text-transform
-            
-            
-              <div class="text-transform:uppercase"></div>
-              uppercase
-            
-            
-              text-decoration
-            
-            
-              <div class="text-decoration:underline"></div>
-              underline
-            
-            
-              background-attachment
-            
-            
-              <div class="background-attachment:scroll"></div>
-              scroll
-              fixed
-              local
-              initial
-              inherit
-            
-            
-              background-repeat
-            
-            
-              <div class="background-repeat:repeat"></div>
-              repeat
-              repeat-x
-              repeat-y
-              no-repeat
-              initial
-              inherit
-            
-            
-              background-size
-            
-            
-              <div class="background-size:auto"></div>
-              auto
-              cover
-              contain
-              initial
-              inherit
-            
-            
-              background-position
-            
-            
-              <div class="background-position:center"></div>
-              left-top
-              left-center
-              left-bottom
-              right-top
-              right-center
-              right-bottom
-              center
-              center-top
-              center-center
-              center-bottom
-              initial
-              inherit
-            
-            
-              bg (background)
-            
-            
-              <div class="background:blue"></div>
-              transparent
-              white
-              black
-              dark-blue
-              extra-dark-gray
-              dark-gray
-              extra-medium-gray
-              medium-gray
-              extra-light-gray
-              medium-light-gray
-              light-gray
-              very-light-gray
-              deep-pink
-              transparent-white
-              transparent-black
-              white-opacity
-              black-opacity
-              black-opacity-light
-              deep-pink-opacity
-              charcoal-gray
-              blue
-            
-            
-              background
-            
-            
-              <div class="background:black"></div>
-              transparent
-              white
-              black
-              dark-blue
-            
-            
-              opacity
-            
-            
-              <div class="opacity:block"></div>
-              0
-              0.1
-              0.2
-              0.3
-              ...
-              0.9
-              1
-            
-            
-              cursor
-            
-            
-              <div class="cursor:auto"></div>
-              alias
-              all-scroll
-              auto
-              cell
-              context-menu
-              col-resize
-              copy
-              crosshair
-              default
-              e-resize
-              ew-resize
-              grab
-              grabbing
-              help
-              move
-              n-resize
-              ne-resize
-              nesw-resize
-              ns-resize
-              nw-resize
-              nwse-resize
-              no-drop
-              none
-              not-allowed
-              pointer
-              progress
-              row-resize
-              s-resize
-              se-resize
-              sw-resize
-              text
-              url
-              w-resize
-              wait
-              zoom-in
-              zoom-out
-            
-          
-

- -

Demo

- - -

- -

+ Main styles and values provided as utility classes + are as follows. +

+ +

+ direction +

<div class="direction:ltr"></div>

ltr

rtl

+ display +

<div class="display:block"></div>

block

inline-block

inline

none

inherit

table

table-cell

flex

+ overflow +

<div class="overflow:auto"></div>

auto

visible

scroll

hidden

+ float +

<div class="float:left"></div>

left

right

none

+ position +

<div class="position:relative"></div>

inherit

relative

absolute

fixed

sticky

+ z-index +

<div class="z-index:auto"></div>

auto

inherit

initial

-2

-5

1 ~ 15

100

101

111

1000

1111

+ top / bottom / left / right +

<div class="top:auto"></div>

auto

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

+ bottom +

<div class="bottom:auto"></div>

auto

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

+ left +

<div class="left:auto"></div>

auto

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

+ right +

<div class="right:auto"></div>

auto

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

+ height +

<div class="height:0"></div>

1px ~ 10px

20px

30px

40px

45px

48px

50px

70px

80px

90px

100px

130px

150px

200px

250px

300px

350px

...

700px

auto

25%

33%

50%

66%

75%

100%

100%-120px

100vh-120px

100vh-100px

100vh-90px

100vh-70px

100vh-50px

80vh

90vh

100vh

fill-available

fit-content

+ min-height +

<div class="min-height:100px"></div>

100px

200px

...

700px

+ max-height +

<div class="max-height:300px"></div>

60px

100%

+ width +

<div class="width:0"></div>

1px ~ 10px

15px

20px

25px

...

90px

100px

110px

120px

130px

150px

180px

200px

250px

300px

350px

...

1000px

10%

12%

15%

20%

25%

30%

35%

40%

41% ~ 50%

55%

60%

65%

70%

75%

80%

85%

90%

95%

100%

auto

unset

fill-available

+ min-width +

<div class="min-width:75px"></div>

75px

100px

200px

250px

300px

+ max-width +

<div class="max-width:300px"></div>

75px

100px

300px

400px

500px

600px

1050px

+ margin +

<div class="margin:auto"></div>

auto

5px

10px

15px

...

100px

+ auto-lr(left & right) +

0-lr

0px_5px

0px_10px

10px_5px

...

100px-lr

+ auto_0px(top & bottom) +

0_0px

5px_0px

10px_0px

15px_0px

...

100px_0px

+ margin-top +

<div class="margin=top:auto"></div>

auto

5px

10px

15px

...

100px

+ margin-bottom +

<div class="margin-bottom:auto"></div>

auto

5px

10px

15px

...

100px

+ margin-left +

<div class="margin-left:auto"></div>

auto

5px

10px

15px

...

100px

+ margin-right +

<div class="margin-right:auto"></div>

auto

5px

10px

15px

...

100px

+ padding +

<div class="padding:0"></div>

5px

10px

15px

...

100px

+ 0_0px(top & bottom) +

5px_0px

10px_0px

15px_0px

...

100px_0px

0-lr(left & right)

1px-lr ~ 10px_5px

20px-lr

20px_5px

30px-lr

...

100px-lr

+ padding-top +

<div class="padding-top:0"></div>

5px

10px

15px

...

100px

+ padding-bottom +

<div class="padding-bottom:15px"></div>

5px

10px

15px

...

100px

+ padding-left +

<div class="padding-left:15px"></div>

5px

10px

15px

...

100px

+ padding-right +

<div class="padding-right:15px"></div>

5px

10px

15px

...

100px

+ border-width +

<div class="border-width:0"></div>

1px ~ 10px

20px

+ border-color +

<div class="border-color:black"></div>

white

black

extra-dark-gray

medium-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

light-gray

light-pink

deep-pink

transparent-pink

+ border-style +

<div class="border-style:dotted"></div>

dotted

dashed

solid

double

groove

ridge

inset

outset

none

hidden

transparent

+ border-radius +

<div class="border-radius:0"></div>

1px ~ 10px

50px

50%

100%

+ font-size +

<div class="font-size:18px"></div>

6px ~ 25px

30px

40px

50px

...

80px

01rem

02rem

03rem

04rem

05rem

1rem

2rem

+ font-weight +

<div class="font-weight:800"></div>

100

200

300

...

900

bold

+ font-align +

<div class="font-align:center"></div>

center

left

right

+ color +

<div class="color:blue"></div>

white

black

extra-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

light-gray

very-light-gray

deep-pink

light-blue

blue

+ text-overflow +

<div class="text-overflow:ellipsis"></div>

ellipsis

+ text-transform +

<div class="text-transform:uppercase"></div>

uppercase

+ text-decoration +

<div class="text-decoration:underline"></div>

underline

+ background-attachment +

<div class="background-attachment:scroll"></div>

scroll

fixed

local

initial

inherit

+ background-repeat +

<div class="background-repeat:repeat"></div>

repeat

repeat-x

repeat-y

no-repeat

initial

inherit

+ background-size +

<div class="background-size:auto"></div>

auto

cover

contain

initial

inherit

+ background-position +

<div class="background-position:center"></div>

left-top

left-center

left-bottom

right-top

right-center

right-bottom

center

center-top

center-center

center-bottom

initial

inherit

+ bg (background) +

<div class="background:blue"></div>

transparent

white

black

dark-blue

extra-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

medium-light-gray

light-gray

very-light-gray

deep-pink

transparent-white

transparent-black

white-opacity

black-opacity

black-opacity-light

deep-pink-opacity

charcoal-gray

blue

+ background +

<div class="background:black"></div>

transparent

white

black

dark-blue

+ opacity +

<div class="opacity:block"></div>

0.1

0.2

0.3

...

0.9

+ cursor +

<div class="cursor:auto"></div>

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

+ +

Demo

+ + +

+ +

- - - - - -

- -

- - + + // for (const copied of copy) { + // copied.onclick = function() { + // object.execCommand("copy"); + // }; + // copied.addEventListener("copy", function(event) { + // event.preventDefault(); + // if (event.clipboardData) { + // event.clipboardData.setData("text/plain", copied.textContent); + // console.log(event.clipboardData.getData("text")) + // }; + // }); + // }; + - - + + diff --git a/package.json b/package.json index 75c6743..bfc9339 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cocreate/css-parser", - "version": "1.16.1", + "version": "1.16.2", "description": "A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.", "keywords": [ "css-parser", @@ -45,20 +45,16 @@ }, "main": "./src/index.js", "devDependencies": { - "@babel/core": "^7.9.6", - "@babel/preset-env": "^7.9.6", - "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", - "file-loader": "^6.2.0", + "css-loader": "^5.1.3", + "esbuild": "^0.25.2", + "esbuild-loader": "^4.3.0", "mini-css-extract-plugin": "^1.5.0", - "style-loader": "^3.3.1", - "terser-webpack-plugin": "^5.1.1", "webpack": "^5.24.4", "webpack-cli": "^4.5.0", "webpack-log": "^3.0.1" }, "dependencies": { - "@cocreate/local-storage": "^1.15.0", - "@cocreate/observer": "^1.16.1" + "@cocreate/local-storage": "^1.16.1", + "@cocreate/observer": "^1.18.0" } } diff --git a/webpack.config.js b/webpack.config.js index 49cf3d5..dffd4e5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,90 +1,65 @@ -const path = require("path") -const TerserPlugin = require("terser-webpack-plugin") -const MiniCssExtractPlugin = require("mini-css-extract-plugin") -const { CleanWebpackPlugin } = require("clean-webpack-plugin") - -module.exports = (env, argv) => { - let isProduction = false - if (argv.mode === 'production') - isProduction = true - - const config = { - entry: { - "CoCreate-css-parser": "./src/index.js", - }, - output: { - path: path.resolve(__dirname, "dist"), - filename: isProduction ? "[name].min.js" : "[name].js", - libraryTarget: "umd", - libraryExport: "default", - library: ["CoCreate", "css-parser"], - globalObject: "this", - }, - - plugins: [ - new CleanWebpackPlugin(), - new MiniCssExtractPlugin({ - filename: "[name].css", - }), - ], - // Default mode for Webpack is production. - // Depending on mode Webpack will apply different things - // on final bundle. For now we don't need production's JavaScript - // minifying and other thing so let's set mode to development - mode: isProduction ? "production" : "development", - module: { - rules: [ - { - test: /.js$/, - exclude: /(node_modules)/, - use: { - loader: "babel-loader", - options: { - plugins: ["@babel/plugin-transform-modules-commonjs"], - }, - }, - }, - { - test: /.css$/i, - use: [ - { loader: "style-loader", options: { injectType: "linkTag" } }, - "file-loader", - ], - }, - ], - }, - - // add source map - ...(isProduction ? {} : { devtool: "eval-source-map" }), - - optimization: { - minimize: true, - minimizer: [ - new TerserPlugin({ - extractComments: true, - // cache: true, - parallel: true, - // sourceMap: true, // Must be set to true if using source-maps in production - terserOptions: { - // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions - // extractComments: 'all', - compress: { - drop_console: true, - }, - }, - }), - ], - splitChunks: { - chunks: "all", - minSize: 200, - // maxSize: 99999, - //minChunks: 1, - - cacheGroups: { - defaultVendors: false, - }, - }, - }, - } - return config -} \ No newline at end of file +const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const { EsbuildPlugin } = require("esbuild-loader"); +const { FileUploader } = require("@cocreate/webpack"); + +module.exports = async (env, argv) => { + const isProduction = argv && argv.mode === "production"; + const config = { + entry: { + "CoCreate-css-parser": "./src/index.js" + }, + output: { + path: path.resolve(__dirname, "dist"), + filename: isProduction ? "[name].min.js" : "[name].js", + libraryExport: "default", + library: ["CoCreate", "cssParser"], + clean: true + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: isProduction ? "[name].min.css" : "[name].css" + }), + new FileUploader(env, argv) + ], + mode: isProduction ? "production" : "development", + devtool: isProduction ? "source-map" : "eval-source-map", + module: { + rules: [ + { + test: /.js$/, + exclude: /node_modules/, + use: { + loader: "esbuild-loader", + options: { + loader: "js", + target: "es2017" + } + } + }, + { + test: /.css$/i, + use: [MiniCssExtractPlugin.loader, "css-loader"] + } + ] + }, + optimization: { + minimize: isProduction, + minimizer: [ + new EsbuildPlugin({ + target: "es2017", + css: true + }) + ], + splitChunks: { + cacheGroups: { + defaultVendors: false + } + } + }, + performance: { + hints: isProduction ? "warning" : false + } + }; + return config; +};

CoCreate helper CSS

Reference

CoCreate helper CSS

Reference

- direction -

- display -

- overflow -

- float -

- position -

- z-index -

- top / bottom / left / right -

- bottom -

- left -

- right -

- height -

- min-height -

- max-height -

- width -

- min-width -

- max-width -

- margin -

- margin-top -

- margin-bottom -

- margin-left -

- margin-right -

- padding -

- padding-top -

- padding-bottom -

- padding-left -

- padding-right -

- border-width -

- border-color -

- border-style -

- border-radius -

- font-size -

- font-weight -

- font-align -

- color -

- text-overflow -

- text-transform -

- text-decoration -

- background-attachment -

- background-repeat -

- background-size -

- background-position -

- bg (background) -

- background -

- opacity -

- cursor -

+ direction +

+ display +

+ overflow +

+ float +

+ position +

+ z-index +

+ top / bottom / left / right +

+ bottom +

+ left +

+ right +

+ height +

+ min-height +

+ max-height +

+ width +

+ min-width +

+ max-width +

+ margin +

+ margin-top +

+ margin-bottom +

+ margin-left +

+ margin-right +

+ padding +

+ padding-top +

+ padding-bottom +

+ padding-left +

+ padding-right +

+ border-width +

+ border-color +

+ border-style +

+ border-radius +

+ font-size +