{"id":1498,"date":"2012-07-10T00:22:50","date_gmt":"2012-07-10T00:22:50","guid":{"rendered":"http:\/\/cssreset.com\/?p=1498"},"modified":"2012-07-10T00:22:50","modified_gmt":"2012-07-10T00:22:50","slug":"css-shorthand-the-lowdown","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-shorthand-the-lowdown\/","title":{"rendered":"CSS Shorthand – The Lowdown."},"content":{"rendered":"

There are many CSS properties that support attribute shorthand to save time, space and may even make it easier for you to read and understand, too. Chris Coyier from CSS-Tricks.com<\/a> takes us through some examples.<\/p>\n

One of the more common properties that allow for shorthand to be used, is margin: and it’s the first one that Chris looks at. He explains how the shorthand is written and read, and shows how it works along the way.<\/p>\n

There are four main ways to use shorthand with a property like margin:<\/code>. First, you can list all four values for top, right, bottom and left. If your right and left values are the same you can shorten to just three values; top, right\/left and bottom. If both your right\/left and top\/bottom values are the same it can be shortened even more to be just top\/bottom and right\/left. And lastly, if all values are equal, then you need only input one which will then be applied to each of the four margins on your page.<\/p>\n

So this code:<\/p>\n

#page-wrap {\r\n    width: 500px;\r\n    margin-top: 10px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    margin-bottom: 10px:\r\n}<\/pre>\n
Can be shortened to this:<\/p>\n
#page-wrap {\r\n    width: 500px;\r\n    margin: 10px auto;\r\n}<\/pre>\n
The same is true with other properties, like padding:<\/code> for instance. The two examples below equate to being the same exact thing.<\/p>\n
p {\r\n    padding-top: 10px;\r\n    padding-left: 50px;\r\n    padding-right: 0px;\r\n    padding-bottom: 20px;\r\n}<\/pre>\n
p {\r\n    padding: 10px 0px 20px 50px;\r\n}<\/pre>\n
You can easily see why CSS shorthand exists and why it is a good idea to use it wherever you can. <\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
There are many CSS properties that support attribute shorthand to save time, space and may even make it easier for you to read and understand, too. Chris Coyier from CSS-Tricks.com takes us through some examples.<\/p>\n
Share and Enjoy !0Shares0<\/p>\n
0<\/p>\n
 […]<\/p>\n
Watch Video<\/a><\/p>\n","protected":false},"author":18,"featured_media":1499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,13],"tags":[79,75,73,102,119,121,123,122],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1498"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1498"}],"version-history":[{"count":3,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1498\/revisions"}],"predecessor-version":[{"id":1524,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1498\/revisions\/1524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1499"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}