Offsize

These classes allows you to apply an offsize to any HTMLElement. An offsize is a "space" that you want to ADD to the width/height of an element. You can specify where you want to add this offsize like for margin and padding by using the "inline" and "block" notation.

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

All around

 

Loading code example. Please wait...

Inline

 

Loading code example. Please wait...

Block

 

Loading code example. Please wait...

Inline end

 

Loading code example. Please wait...

  Features

  Install

  CSS Classes

  1. s-os:0

    Apply the 0 offsize all around

  2. s-osb:0

    Apply the 0 block start and end offsize

  3. s-osbs:0

    Apply the 0 block start offsize

  4. s-osbe:0

    Apply the 0 block end offsize

  5. s-osi:0

    Apply the 0 inline start and end offsize

  6. s-osis:0

    Apply the 0 inline start offsize

  7. s-osie:0

    Apply the 0 inline end offsize

  8. s-os:10

    Apply the 10 offsize all around

  9. s-osb:10

    Apply the 10 block start and end offsize

  10. s-osbs:10

    Apply the 10 block start offsize

  11. s-osbe:10

    Apply the 10 block end offsize

  12. s-osi:10

    Apply the 10 inline start and end offsize

  13. s-osis:10

    Apply the 10 inline start offsize

  14. s-osie:10

    Apply the 10 inline end offsize

  15. s-os:20

    Apply the 20 offsize all around

  16. s-osb:20

    Apply the 20 block start and end offsize

  17. s-osbs:20

    Apply the 20 block start offsize

  18. s-osbe:20

    Apply the 20 block end offsize

  19. s-osi:20

    Apply the 20 inline start and end offsize

  20. s-osis:20

    Apply the 20 inline start offsize

  21. s-osie:20

    Apply the 20 inline end offsize

  22. s-os:30

    Apply the 30 offsize all around

  23. s-osb:30

    Apply the 30 block start and end offsize

  24. s-osbs:30

    Apply the 30 block start offsize

  25. s-osbe:30

    Apply the 30 block end offsize

  26. s-osi:30

    Apply the 30 inline start and end offsize

  27. s-osis:30

    Apply the 30 inline start offsize

  28. s-osie:30

    Apply the 30 inline end offsize

  29. s-os:40

    Apply the 40 offsize all around

  30. s-osb:40

    Apply the 40 block start and end offsize

  31. s-osbs:40

    Apply the 40 block start offsize

  32. s-osbe:40

    Apply the 40 block end offsize

  33. s-osi:40

    Apply the 40 inline start and end offsize

  34. s-osis:40

    Apply the 40 inline start offsize

  35. s-osie:40

    Apply the 40 inline end offsize

  36. s-os:50

    Apply the 50 offsize all around

  37. s-osb:50

    Apply the 50 block start and end offsize

  38. s-osbs:50

    Apply the 50 block start offsize

  39. s-osbe:50

    Apply the 50 block end offsize

  40. s-osi:50

    Apply the 50 inline start and end offsize

  41. s-osis:50

    Apply the 50 inline start offsize

  42. s-osie:50

    Apply the 50 inline end offsize

  43. s-os:60

    Apply the 60 offsize all around

  44. s-osb:60

    Apply the 60 block start and end offsize

  45. s-osbs:60

    Apply the 60 block start offsize

  46. s-osbe:60

    Apply the 60 block end offsize

  47. s-osi:60

    Apply the 60 inline start and end offsize

  48. s-osis:60

    Apply the 60 inline start offsize

  49. s-osie:60

    Apply the 60 inline end offsize

  50. s-os:70

    Apply the 70 offsize all around

  51. s-osb:70

    Apply the 70 block start and end offsize

  52. s-osbs:70

    Apply the 70 block start offsize

  53. s-osbe:70

    Apply the 70 block end offsize

  54. s-osi:70

    Apply the 70 inline start and end offsize

  55. s-osis:70

    Apply the 70 inline start offsize

  56. s-osie:70

    Apply the 70 inline end offsize

  57. s-os:80

    Apply the 80 offsize all around

  58. s-osb:80

    Apply the 80 block start and end offsize

  59. s-osbs:80

    Apply the 80 block start offsize

  60. s-osbe:80

    Apply the 80 block end offsize

  61. s-osi:80

    Apply the 80 inline start and end offsize

  62. s-osis:80

    Apply the 80 inline start offsize

  63. s-osie:80

    Apply the 80 inline end offsize

  64. s-os:90

    Apply the 90 offsize all around

  65. s-osb:90

    Apply the 90 block start and end offsize

  66. s-osbs:90

    Apply the 90 block start offsize

  67. s-osbe:90

    Apply the 90 block end offsize

  68. s-osi:90

    Apply the 90 inline start and end offsize

  69. s-osis:90

    Apply the 90 inline start offsize

  70. s-osie:90

    Apply the 90 inline end offsize

  71. s-os:100

    Apply the 100 offsize all around

  72. s-osb:100

    Apply the 100 block start and end offsize

  73. s-osbs:100

    Apply the 100 block start offsize

  74. s-osbe:100

    Apply the 100 block end offsize

  75. s-osi:100

    Apply the 100 inline start and end offsize

  76. s-osis:100

    Apply the 100 inline start offsize

  77. s-osie:100

    Apply the 100 inline end offsize

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on