{"id":16049623,"url":"https://github.com/dcalhoun/css-utils-margin","last_synced_at":"2025-09-17T16:55:10.257Z","repository":{"id":145719148,"uuid":"61380081","full_name":"dcalhoun/css-utils-margin","owner":"dcalhoun","description":"Immutable, CSS margin utilities.","archived":false,"fork":false,"pushed_at":"2022-02-22T21:38:14.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-12T08:45:08.067Z","etag":null,"topics":["atomic","css","immutable","margin-utilities","suitcss"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dcalhoun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-17T14:34:38.000Z","updated_at":"2023-03-08T15:21:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0e27a90-f094-4c40-9575-55f4e378e108","html_url":"https://github.com/dcalhoun/css-utils-margin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-margin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-margin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-margin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-margin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcalhoun","download_url":"https://codeload.github.com/dcalhoun/css-utils-margin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247301187,"owners_count":20916459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic","css","immutable","margin-utilities","suitcss"],"created_at":"2024-10-09T00:25:20.360Z","updated_at":"2025-09-17T16:55:05.169Z","avatar_url":"https://github.com/dcalhoun.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-utils-margin\n[![Build Status](https://travis-ci.org/dcalhoun/css-utils-margin.svg?branch=master)](https://travis-ci.org/dcalhoun/css-utils-margin)\n\nImmutable, CSS margin utilities.\n\n## Naming Convention\nDue to the ubiquitous nature of setting margin, these utilities use a shorthand\nnaming convention.\n\n| Shorthand | Description                |\n| --------- | -----------                |\n| m         | Margin                     |\n| t         | Top                        |\n| r         | Right                      |\n| b         | Bottom                     |\n| l         | Left                       |\n| x         | XAxis (left and right)     |\n| y         | YAxis (top and bottom)     |\n| n         | Negative                   |\n| 0         | 0 reset                    |\n| 1         | --space-1 (default 0.5rem) |\n| 2         | --space-2 (default 1rem)   |\n| 3         | --space-3 (default 2rem)   |\n| 4         | --space-4 (default 4rem)   |\n\nChange or reset default margins using the white space scale. Negative u-xAxis\nmargins are used to offset margins and padding of child elements. Margin auto is\nused to horizontally center block-level elements with a set width.\n\n```css\n.u-m0  { margin:        0 }\n.u-mt0 { margin-top:    0 }\n.u-mr0 { margin-right:  0 }\n.u-mb0 { margin-bottom: 0 }\n.u-ml0 { margin-left:   0 }\n.u-mx0 { margin-left:   0; margin-right:  0 }\n.u-my0 { margin-top:    0; margin-bottom: 0 }\n\n.u-m1  { margin:        var(--space-1) }\n.u-mt1 { margin-top:    var(--space-1) }\n.u-mr1 { margin-right:  var(--space-1) }\n.u-mb1 { margin-bottom: var(--space-1) }\n.u-ml1 { margin-left:   var(--space-1) }\n.u-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }\n.u-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }\n\n.u-m2  { margin:        var(--space-2) }\n.u-mt2 { margin-top:    var(--space-2) }\n.u-mr2 { margin-right:  var(--space-2) }\n.u-mb2 { margin-bottom: var(--space-2) }\n.u-ml2 { margin-left:   var(--space-2) }\n.u-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }\n.u-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }\n\n.u-m3  { margin:        var(--space-3) }\n.u-mt3 { margin-top:    var(--space-3) }\n.u-mr3 { margin-right:  var(--space-3) }\n.u-mb3 { margin-bottom: var(--space-3) }\n.u-ml3 { margin-left:   var(--space-3) }\n.u-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }\n.u-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }\n\n.u-m4  { margin:        var(--space-4) }\n.u-mt4 { margin-top:    var(--space-4) }\n.u-mr4 { margin-right:  var(--space-4) }\n.u-mb4 { margin-bottom: var(--space-4) }\n.u-ml4 { margin-left:   var(--space-4) }\n.u-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }\n.u-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }\n\n.u-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }\n.u-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }\n.u-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }\n.u-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }\n\n.u-mlAuto { margin-left: auto }\n.u-mrAuto { margin-right: auto }\n.u-mxAuto { margin-left: auto; margin-right: auto; }\n```\n\n## Resetting Margins\nTo increase information density and to better align elements, remove default\nmargins from typographic elements using the margin utilities.\n\n```html\n\u003ch1 class=\"u-m0\"\u003eNo margin\u003c/h1\u003e\n\u003ch1 class=\"u-mt0\"\u003eNo margin top\u003c/h1\u003e\n\u003ch1 class=\"u-mb0\"\u003eNo margin bottom\u003c/h1\u003e\n```\n\n## Add Spacing\nAdd spacing around elements using a combination of margin utilities.\n\n```html\n\u003cdiv class=\"u-mxn1\"\u003e\n  \u003cdiv class=\"u-m1\"\u003eHamburger\u003c/div\u003e\n  \u003cdiv class=\"u-m1\"\u003eHamburger\u003c/div\u003e\n  \u003cdiv class=\"u-m1\"\u003eHamburger\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe negative margin utilities also work with padded children.\n\n```html\n\u003cdiv class=\"border\"\u003e\n  \u003cdiv class=\"u-mxn2\"\u003e\n    \u003cdiv class=\"u-px2 border\"\u003ePadded div\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Center Elements\nBlock elements with a set width can be centered with `.u-mxAuto`.\n\n```html\n\u003cimg src=\"http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg\"\n  width=\"96\"\n  height=\"96\"\n  class=\"block u-mxAuto\" /\u003e\n```\n\n## Credits\nThis utility is heavily inspired by [Basscss](http://www.basscss.com) and\n[SuitCSS](http://suitcss.github.io). This repository is merely a combining of\ngreat principles championed by each.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcalhoun%2Fcss-utils-margin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcalhoun%2Fcss-utils-margin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcalhoun%2Fcss-utils-margin/lists"}