Skip to content

Instantly share code, notes, and snippets.

@kevinkace
Created December 21, 2010 20:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinkace/750562 to your computer and use it in GitHub Desktop.
Save kevinkace/750562 to your computer and use it in GitHub Desktop.
Add varying amounts of padding or margin to elements.
/* --------------------------------------------------------------
screen.css
* Add varying amounts of padding or margin to elements.
* Naming convention:
- First letter denotes padding (p) or margin (m).
- Second letter denotes where spacing is applied:
a - all sides
t - top
r - right
b - bottom
l - left
h - horizontal (left and right)
v - vertical (top and bottom)
- Last value consisting of 1-3 numbers for the amount of spacing
in percent based on the gutter size/vertical rhythm of BlueprintCSS.
See the Readme file in this folder for additional instructions.
-------------------------------------------------------------- */
.pa-0{padding:0}
.pt-0{padding-top:0}
.pr-0{padding-right:0}
.pb-0{padding-bottom:0}
.pl-0{padding-left:0}
.ph-0{padding-left:0;padding-right:0}
.pv-0{padding-top:0;padding-bottom:0}
.pa-25{padding:0.375em 5px}
.pt-25{padding-top:0.375em}
.pr-25{padding-right:5px}
.pb-25{padding-bottom:0.375em}
.pl-25{padding-left:5px}
.ph-25{padding-left:5px;padding-right:5px}
.pv-25{padding-top:0.375em;padding-bottom:0.375em}
.pa-50{padding:0.75em 10px}
.pt-50{padding-top:0.75em}
.pr-50{padding-right:10px}
.pb-50{padding-bottom:0.75em}
.pl-50{padding-left:10px}
.ph-50{padding-left:10px;padding-right:10px}
.pv-50{padding-top:0.75em;padding-bottom:0.75em}
.pa-75{padding:1.125em 15px}
.pt-75{padding-top:1.125em}
.pr-75{padding-right:15px}
.pb-75{padding-bottom:1.125em}
.pl-75{padding-left:15px}
.ph-75{padding-left:15px;padding-right:15px}
.pv-75{padding-top:1.125em;padding-bottom:1.125em}
.pa-100{padding:1.5em 20px}
.pt-100{padding-top:1.5em}
.pr-100{padding-right:20px}
.pb-100{padding-bottom:1.5em}
.pl-100{padding-left:20px}
.ph-100{padding-left:20px;padding-right:20px}
.pv-100{padding-top:1.5em;padding-bottom:1.5em}
.pa-125{padding:1.875em 25px}
.pt-125{padding-top:1.875em}
.pr-125{padding-right:25px}
.pb-125{padding-bottom:1.875em}
.pl-125{padding-left:25px}
.ph-125{padding-left:25px;padding-right:25px}
.pv-125{padding-top:1.875em;padding-bottom:1.875em}
.pa-150{padding:2.25em 30px}
.pt-150{padding-top:2.25em}
.pr-150{padding-right:30px}
.pb-150{padding-bottom:2.25em}
.pl-150{padding-left:30px}
.ph-150{padding-left:30px;padding-right:30px}
.pv-150{padding-top:2.25em;padding-bottom:2.25em}
.pa-175{padding:2.625em 35px}
.pt-175{padding-top:2.625em}
.pr-175{padding-right:35px}
.pb-175{padding-bottom:2.625em}
.pl-175{padding-left:35px}
.ph-175{padding-left:35px;padding-right:35px}
.pv-175{padding-top:2.625em;padding-bottom:2.625em}
.pa-200{padding:3em 40px}
.pt-200{padding-top:3em}
.pr-200{padding-right:40px}
.pb-200{padding-bottom:3em}
.pl-200{padding-left:40px}
.ph-200{padding-left:40px;padding-right:40px}
.pv-200{padding-top:3em;padding-bottom:3em}
.ma-0{margin:0}
.mt-0{margin-top:0}
.mr-0{margin-right:0}
.mb-0{margin-bottom:0}
.ml-0{margin-left:0}
.mh-0{margin-left:0;margin-right:0}
.mv-0{margin-top:0;margin-bottom:0}
.ma-25{margin:0.375em 5px}
.mt-25{margin-top:0.375em}
.mr-25{margin-right:5px}
.mb-25{margin-bottom:0.375em}
.ml-25{margin-left:5px}
.mh-25{margin-left:5px;margin-right:5px}
.mv-25{margin-top:0.375em;margin-bottom:0.375em}
.ma-50{margin:0.75em 10px}
.mt-50{margin-top:0.75em}
.mr-50{margin-right:10px}
.mb-50{margin-bottom:0.75em}
.ml-50{margin-left:10px}
.mh-50{margin-left:10px;margin-right:10px}
.mv-50{margin-top:0.75em;margin-bottom:0.75em}
.ma-75{margin:1.125em 15px}
.mt-75{margin-top:1.125em}
.mr-75{margin-right:15px}
.mb-75{margin-bottom:1.125em}
.ml-75{margin-left:15px}
.mh-75{margin-left:15px;margin-right:15px}
.mv-75{margin-top:1.125em;margin-bottom:1.125em}
.ma-100{margin:1.5em 20px}
.mt-100{margin-top:1.5em}
.mr-100{margin-right:20px}
.mb-100{margin-bottom:1.5em}
.ml-100{margin-left:20px}
.mh-100{margin-left:20px;margin-right:20px}
.mv-100{margin-top:1.5em;margin-bottom:1.5em}
.ma-125{margin:1.875em 25px}
.mt-125{margin-top:1.875em}
.mr-125{margin-right:25px}
.mb-125{margin-bottom:1.875em}
.ml-125{margin-left:25px}
.mh-125{margin-left:25px;margin-right:25px}
.mv-125{margin-top:1.875em;margin-bottom:1.875em}
.ma-150{margin:2.25em 30px}
.mt-150{margin-top:2.25em}
.mr-150{margin-right:30px}
.mb-150{margin-bottom:2.25em}
.ml-150{margin-left:30px}
.mh-150{margin-left:30px;margin-right:30px}
.mv-150{margin-top:2.25em;margin-bottom:2.25em}
.ma-175{margin:2.625em 35px}
.mt-175{margin-top:2.625em}
.mr-175{margin-right:35px}
.mb-175{margin-bottom:2.625em}
.ml-175{margin-left:35px}
.mh-175{margin-left:35px;margin-right:35px}
.mv-175{margin-top:2.625em;margin-bottom:2.625em}
.ma-200{margin:3em 40px}
.mt-200{margin-top:3em}
.mr-200{margin-right:40px}
.mb-200{margin-bottom:3em}
.ml-200{margin-left:40px}
.mh-200{margin-left:40px;margin-right:40px}
.mv-200{margin-top:3em;margin-bottom:3em}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment